there can be only One

prePopulated array

by trentHarlem

HTML

<!-- <div id="selectList">
  <select>
    <option value="option1">Val 1</option>
    <option value="option2">Val 2</option>
    <option value="option3">Val 3</option>
    <option value="option4">Val 4</option>
    <option value="option5">Val 5</option>
  </select>
  </div>
   -->
  <button>Select
  <select></select>
  </button>
  <div id='bottom'>
    <p id='output1'></p>
    <p id='output2'></p>
  </div>

CSS

* {
  font: 1.1rem system-ui;
}
#bottom {
  position: fixed;
  bottom: 0px;
}

JavaScript

/* const output1 = document.getElementById('output1')
const output2 = document.getElementById('output2')
const options = document.querySelectorAll('option')
const optionsArray = []
const select = document.querySelector('select');
console.log()
output1.innerHTML = `options.length: ${options.length}`
output2.innerHTML = `optionsArray: ${optionsArray}`

function addToArray(e) {
  if (optionsArray.length === 0)
    optionsArray.push()
  else {
    optionsArray.shift()
    optionsArray.push()
  }
}

const makeSelection = () => {
  for (let i = 0; i < options.length; i++) {
    options[i].addEventListener('click', addToArray(i.TextContent))
  }
}
makeSelection()
select.addEventListener('click', addToArray())
 */

//



let button = document.querySelector('button')
let select = document.querySelector('select')
//let values = [1,2,3,4,5]
let values = ['value1','value2','value3','value4','value5']
button.addEventListener('click', () => {
let options = values.map(value => `<option value=${value.toLowerCase()}>${value}</option>`).join('\n')
select.innerHTML = options
})