使用下拉菜单更改背景颜色

Question

我正在做一些大学工作，但我被这段代码困住了。 我必须使用下拉菜单更改页面的背景颜色。

下拉菜单代码

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



</select>

if 语句

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

if(sel1 =="Green"){

document.body.style.backgroundColor = Green

}
}
</script>

这也是运行 function 的按钮

 <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

指出你的错误：

• <select>的id属性缺少引号。
• getElementId函数应该是getElementById 。

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

如果您在<option>的value属性中为background-color使用有效的 CSS 值，则可以使用该值而无需复杂的switch或if语句。

我们函数调用中的this位指的是调用 HTML 元素。

 function updateBackgroundColour(selectElem) { var i = selectElem.selectedIndex; // Get the selected option's index. if (i < 0) { return; // Nothing is selected. } // Set the background-color CSS attribute of the <body> element to // the value attribute of the selected option in our <select> element. document.body.style.backgroundColor = selectElem.options[i].value; }

 <form> Background color: <!-- Note the onchange attribute. "this" refers to the changing element. --> <select id="background" onchange="updateBackgroundColour(this)"> <option value="red">Red</option> <option value="MediumSpringGreen">Medium Spring Green</option> <option value="#34495e">Wet asphalt</option> </select> <form>

Answer 4

只需编辑 jquery 脚本即可在您单击下拉菜单并更改背景图像的值时显示 GIF