有没有办法让用户 select 成为一种颜色/颜色，只有你在 JavaScript/HTML 中给他们的选项？

Question

Hey I was wondering if there is a way that you can make the user choose a colour/color with the options that you give them? I know there is a way to let user select a color/colour of thier choices but is there a way that you give the user only three options that change the background colour/color? for instance let say I want the user to only have the choice between black and blue how would I code this?

This is what I tried:

HTML Page:

<div class="colour selector">
    Pick a color <input onchange="colorSelected(this)" type="color">
  </div>

JavaScript Page:

function colorSelected (element) {
    document.body.style.background = element.value
}

But i want to be able to give the user limted options like only three colours (red, blue & yellow)

Answer 1

 let select = document.getElementById("select"); let text = document.getElementById("text"); select.onclick = function() { switch (select.value){ case "red": text.style.color = "red"; select.style.backgroundColor = "red"; break; case "pink": text.style.color = "pink"; select.style.backgroundColor = "pink"; break; case "blue": text.style.color = "blue"; select.style.backgroundColor = "blue"; break; } }

 .color1{ background-color:red; }.color2{ background-color:pink; }.color3{ background-color:blue; }

 <select id="select"> <option hidden selected value="">Choose a color</option> <option value="red" class="color color1"></option> <option value="pink" class="color color2"></option> <option value="blue" class="color color3"></option> </select> <p id="text">Some text</p>

Edited version

Answer 2

Use a select with option for each choice.

Use your function in an eventListener that will pass the event object as an argument so you can get the value from the select (which is the event.target ):

 const mySelect = document.getElementById("my-select"); mySelect.addEventListener("change", colorSelected); function colorSelected(event) { document.body.style.background = event.target.value }

 <select id="my-select"> <option value="pick" hidden>Pick a color</option> <option value="red">Red</option> <option value="blue">Blue</option> <option value="yellow">Yellow</option> </select>