JSFiddle - React, Tailwind, and code Playground

by trentHarlem

HTML

<div id='selectList'>
    <label for='select'>A Giant Bear is about to KILL then EAT your corpse for lunch... what do you do?</label>
    <select name='select'> -->
      <option title='Run & Live' value='Live'>RUN! and Live...</option>
      <option value='Die'>Get Killed</option>
      <option value='Die'>Get Eaten</option>
      <option value='Die'>Die</option>
      <option value='Die'>Wish you were somewhere else...then immediately get killed by the bear</option>
    </select>
  </div>

  <div id='bottom'>
    <p id='output1'></p>
    <p id='output2'></p>

  </div>

CSS

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

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 = []; // populated by choices based on responses
  //optionsArray = [new choices based on previous user response]
  const selectedArray = []; //will be archive of responses i.e. user path
  // selectedArray = [choiceFromPageOne, choiceFromPageTwo, etc]
  const select = document.querySelector('select');
  const chosen = [] // Randy
  
  //const select = document.querySelector('select');
select.addEventListener('change', addMe);
select.addEventListener('mouseup', changeMe);
//let chosen = [];

function changeMe(e) {
  select.removeEventListener('mouseup', changeMe);
  select.dispatchEvent(new Event('change'));
}

function addMe(e) {
  chosen.push(e.target.options[e.target.selectedIndex].value);
  chosen.push(e.target.options[e.target.selectedIndex].index);
  chosen.push(e.target.options[e.target.selectedIndex].title);
  chosen.push(e.target.options[e.target.selectedIndex].name);
  chosen.push(e.target.value);
  console.log(chosen);
}
  
  
  
  
  
  
  // ------------------------------------------------------
  
/*   select.addEventListener(
    'change',
    (addToArray = (e) => {
      output4.innerHTML = `selectedArray: ${e.target.value}`;
      selectedArray.push(e.target.value);
      //output2.innerHTML = `optionsArray: ${optionsArray}`;
      select.removeEventListener('change', addToArray)
    }),
    false
  ); */

})();