javascript - 选择选项时更改选项的颜色

Question

我想要一个在用户选择时更改颜色的选项。例如:用户选择红色选项，然后将运行一个函数来更改红色。如果用户选择绿色，那么它就会变成绿色。等等

<select onchange="changeColor();" class="color" id="rgb">
  <option id="red" value="Red">Red</option>
  <option id="green" value="Green">Green</option>
  <option id="blue" value="Blue">Blue</option>
</select>

我从下面的函数开始，但我不确定哪里出了问题。

function changeColor() {
    var red = document.getElementById('red');
    var green = document.getElementById('green');
    var blue = document.getElementById('blue');

    if(event.target.value == red) {
      red.style.color = "red";
    } else if(event.target.value == green) {
      green.style.color = "green";
    } else if(event.target.value == blue) {
      blue.style.color = "blue";
    } else  {
      alert("There was an error!");
      }
  };

Answer 1

您似乎尚未在函数中添加“事件”参数。试试这个:

function changeColor(event) {
  var red = document.getElementById(red);
  var green = document.getElementById(green);
  var blue = document.getElementById(blue);

  if (event.target.value == red) {
    red.style.color = "red";
  } else if (event.target.value == green) {
    green.style.color = "green";
  } else if (event.target.value == blue) {
    blue.style.color = "blue";
  } else {
    alert("There was an error!");
  }};