Question

我希望身体的背景颜色根据所选的选项值和textContent进行更改。

select.addEventListener('input', function() {
  for (let i = 0; i < select.length; i++) {

    text = select.options[i].text;
    value = select.options[i].value;

    if (value == "Turquoise") {
      body.style.backgroundColor = value;
    } else if (text == "Sun Flower") {
      body.style.backgroundColor = value;
    } else if (text == "Pumpkin") {
      body.style.backgroundColor = value;
    } else if (text == "Alizarin") {
      body.style.backgroundColor = value;
    } else if (text == "Emerald") {
      body.style.backgroundColor = value;
    } else if (text == "Peter River") {
      body.style.backgroundColor = value;
    } else {
      body.style.backgroundColor = "#bdc3c7";
    }
  }

});

问题是当我选择一个选项时，背景颜色只会通过检查最后一个else if语句而改变一次。我尝试使用input和change event，但没有任何变化。

options[i].value包含十六进制的颜色名称

Answer 1

您不需要迭代所有应该选择选项的选项并检索要分配给背景的值，并使用change事件进行选择 - 下拉列表，请参阅下面的演示

＆＃13;

var select = document.querySelector("#my-select");
var body = document.body;
select.addEventListener('change', function() {
  var options = this.options;
  var selectedOption = options[options.selectedIndex];
  body.style.background = selectedOption.value;

});

＆＃13;

<select id="my-select">
  <option value="#add8e6">Blue</option>
  <option value="#90ee90">Green</option>
  <option value="#ffc0cb">Pink</option>
</select>

＆＃13;

使用选择选项输入js更改主体背景颜色

1 个答案: