Question

我正在做一些单一的工作而且我被困在这段代码上。我必须使用下拉菜单更改页面的背景颜色。

下拉菜单代码

 <form>
    Background colour:
    <select id= background>
     <option value="White"> White </option>
     <option value="Green" > Green</option>
     <option value="Black"> Black </option>



</select>

if statement

<script>
function myFunction() {
var sel1 = document.getElementId('background')

if(sel1 =="Green"){

document.body.style.backgroundColor = Green

}
}
</script>

此处还有运行该功能的按钮

 <button onclick="myFunction()">Change Background</button>

Answer 1

在你的javascript代码中 “getElementId”函数错误。

请尝试以下代码

function myFunction() {
    var sel1 = document.getElementById('background').value;
    document.body.style.backgroundColor = sel1;
}

Answer 2

function myFunction() {
  var sel1 = document.getElementId('background').value;

  if(sel1 =="Green"){

      document.body.style.backgroundColor = "Green" ;

   }
 }

这应该是你的HTML

<select id="background" onchange="myFunction() ">

Answer 3

指出你的错误：

id的{{1}}属性缺少引号。
<select>函数应为getElementId。

您需要一个合适的JavaScript函数来处理实际的更改，可以通过单击按钮或下拉列表中的更改事件来触发。我使用后一种方法编写了一个片段，但如果您需要使用按钮，则可以使用getElementById或现代selectElem从函数内部获取document.getElementById('background')。

如果您在document.querySelector('#background')的{{1}}属性中使用background-color的有效CSS值，则可以使用不带复杂value或<option>的值}陈述。

函数调用中的switch位指的是调用HTML元素。

if

this

使用下拉菜单

3 个答案: