Question

function change_color() {
  var getSelect = document.getElementsByName("colorPick");
  var selection = getSelect.options[getSelect.selectedIndex].value;
  for (i = 0; i < getSelect.options.length; i++) {
    document.body.style.backgroundColor = selection;
  }
}

<select name="colorPick" onchange="change_color();">
  <option value="0">Background Color</option>
  <option value="1">Blue</option>
  <option value="2">Cyan</option>
  <option value="3">White</option>
</select>

/ 出了点问题。我尝试了很多不同的东西，但是当我选择一种颜色时似乎没什么用。 /

Answer 1

您的代码无效，因为getElementsByName返回了elementList的elementList集合。您需要访问其中一个元素，因为您无法获得集合的值。

document.getElementsByName("colorPick")[0]; // First element

您可以通过传递select元素的上下文来避免这种情况：onchange="change_color(this)"。

在更改背景颜色方面，您需要将body元素的背景颜色设置为所选元素的文本。不是价值。

Example Here

function change_color(select) {
    var color = select.options[select.selectedIndex].textContent;
    
    document.body.style.backgroundColor = color;
}

<select name="colorPick" onchange="change_color(this);">
    <option value="0">Background Color</option>
    <option value="1">Blue</option>
    <option value="2">Cyan</option>
    <option value="3">White</option>
</select>

我建议使用unobtrusive JavaScript：

Example Here

document.querySelector('[name="colorPick"]').addEventListener('change', function () {
    var color = this.options[this.selectedIndex].textContent;
    
    document.body.style.backgroundColor = color;
});

<select name="colorPick">
    <option value="0">Background Color</option>
    <option value="1">Blue</option>
    <option value="2">Cyan</option>
    <option value="3">White</option>
</select>

Answer 2

它的工作原理如下：

<body>
<select name="colorPick" onchange="change_color();">
<option value="0">Background Color</option>
<option value="Blue">Blue</option>
<option value="Cyan">Cyan</option>
<option value="White">White</option>
</select>
</body>

的javascript：

function change_color() {
    var getSelect = document.getElementsByName("colorPick");
    var selection = getSelect[0].options[getSelect[0].selectedIndex].value;
    for (i = 0; i < getSelect[0].options.length; i++) {
        document.body.style.backgroundColor = selection;
    }
}

如何在选择该颜色的选择列表选项时更改文档背景颜色

2 个答案: