there can be only One

by trentHarlem

HTML

<!--  "There can be only One."   -->
  <div id='selectList'>
    <label for='select'>A Giant Bear is about to KILL you then EAT your corpse for lunch... what do you do?</label>
    <select name='select'> -->
      <option value='Live'>Shoot the bear! and Live</option>   
      <option value='Killed'>Get Killed</option>
      <option value='Die'>Get Eaten</option>
      <option value='Your Dead'>Die</option>
      <option value='Die'>Wish i was somewhere else...then immediately get killed by the bear</option>
    </select>
  </div>
  
  <div id='bottom'>
   <span id='output4'>selectedArray:</span>
<!-- <span id='output1'></span>
    <span id='output2'>optionsArray:</span> -->
    <span id='output3'></span>
   
  </div>

  <!--   <div id='selectList2'>
    <label for='selectRoofTop' >You wake up and realize you were sleep walking near the edge of the roof on a Skyscraper... what do you do?</label>
    <select name='selectRoofTop'>
      <option value='Game-Over'>fall off & Die</option>
      <option value='Killed'>Get Killed by the Bear following you</option>
      <option value='Live'>Run to Safety! and the watch the Bear fall to his death</option>
      <option value='Die'>try to kill the bear with a select list placeholder and die instantly</option>
      <option value='Died'>have a fear induced heart attack and die</option>
    </select>
    </div> -->

CSS

* {
  font: 1.1rem system-ui;
}

#bottom {
  position: fixed;
  bottom: 0px;
}

#top {
  position: fixed;
  top: 0px;
}

select   {
  position: relative;
  z-index: 2;
  /* for muliple */
 /*  height: 125px; */
}

JavaScript

(function() {

   const output1 = document.getElementById('output1')
   const output2 = document.getElementById('output2')
   const output3 = document.getElementById('output3')
   const output4 = document.getElementById('output4')
   const options = document.querySelectorAll('option')
   const optionsArray = []
   let arrayDotFrom = Array.from(options)
   const selectedArray = []
   const select = document.querySelector('select');


   // console.log(Object.keys(options))
   // output1.innerHTML = `options.length: ${options.length}`
   // output2.innerHTML = `optionsArray: ${optionsArray}`
   // output3.innerHTML = `Object.keys(options): ${Object.keys(options)}`
/*    output4.innerHTML = `selectedArray: ${selectedArray}`
   
   options.forEach((option, i) => {
     if (option.value !== '') {
       optionsArray.push(option.value)
       //output2.innerHTML = `optionsArray: ${optionsArray}`
       //console.log(option.value)
     } else {
       //output2.innerHTML = `optionsArray: ${optionsArray}`
     }
   })
    */
// NEW--------------------------------------------------------------
select.dispatchEvent(new Event('change'));
select.addEventListener('click', reveal = () => {
console.log('reveal')
  select.addEventListener('change', addToArray = (e) => {
     //  DO NOT USE if (e.target.value === '') {
     // alert('No Selection made. Select an Option.')
     if (selectedArray.length === 0 && e.target.value === 'Live') {
       selectedArray.push(e.target.value)
       output4.innerHTML = `selectedArray: ${selectedArray}`
       output3.innerHTML = ` your selection was ${e.target.value}`
      select.removeEventListener('change', addToArray)
     } else if (selectedArray.length === 0 && e.target.value !== 'select') {
       selectedArray.push(e.target.value)
       output4.innerHTML = `selectedArray: ${selectedArray}`
       output3.innerHTML = ` your selection was ${e.target.value}`
       select.removeEventListener('change', addToArray)
     } else {
      ...