如何从下拉菜单使用javascript更改网页的背景颜色

问题描述：

我需要关于JavaScript功能代码的帮助，我想从下拉列表中更改网页的背景颜色。当某人从列表中选择任何颜色时，它会作出相同的响应并更改网页的背景颜色。我在JS中使用的技术是DOM。我们如何做到这一点。这里是我的这个任务的代码： -如何从下拉菜单使用javascript更改网页的背景颜色

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script type="text/javascript"> 
 
    var change; 
 

 
    function colour() { 
 
     document.bgcolor = change.themes.val(); 
 
    } 
 
    colour(); 
 
    </script> 
 
</head> 
 
<title>Best Themes</title> 
 

 
<body> 
 
    <form action="onchange(colour)" name="themes" method="post"> 
 
    <select name="colors"> 
 
    <option value="white" selected="select">White</option> 
 
    <option value="black">Black</option> 
 
    <option value="orange">Orange</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="skyblue">Sky Blue</option> 
 
    <option value="pink">Pink</option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="mustard">Mustard</option> 
 
    <option value="maroon">Maroon</option> 
 
    <option value="magenta">Magenta</option> 
 
    <option value="cyan">Cyan</option> 
 
    <option value="gray">Gray</option> 
 
    <option value="seagreen">Sea Green</option> 
 
    <option value="chocolate">Chocolate</option> 
 
    <option value="fuchsia">Fuchsia</option> 
 
    <option value="gold">Gold</option> 
 
    <option value="khaki">Khaki</option> 
 
    <option value="silver">Silver</option> 
 
    </select> 
 
    </form> 
 
</body> 
 

 
</html>

注意文件名保存为theme.html

请帮助，谢谢！

答

你没有调用onChange功能
的onChange功能设置为形式而不是select
您需要document.body.style.backgroundColor改变身体的背景颜色
您是基于使用change.themes在var change这是从未在别处使用，从未设置

function changeColor(el) { 
 
    document.body.style.backgroundColor = el.value; 
 
}

<select name="colors" onchange="changeColor(this)"> 
 
<option value="white" selected="select">White</option> 
 
<option value="black">Black</option> 
 
<option value="orange">Orange</option> 
 
<option value="green">Green</option> 
 
<option value="blue">Blue</option> 
 
<option value="skyblue">Sky Blue</option> 
 
<option value="pink">Pink</option> 
 
<option value="yellow">Yellow</option> 
 
<option value="mustard">Mustard</option> 
 
<option value="maroon">Maroon</option> 
 
<option value="magenta">Magenta</option> 
 
<option value="cyan">Cyan</option> 
 
<option value="gray">Gray</option> 
 
<option value="seagreen">Sea Green</option> 
 
<option value="chocolate">Chocolate</option> 
 
<option value="fuchsia">Fuchsia</option> 
 
<option value="gold">Gold</option> 
 
<option value="khaki">Khaki</option> 
 
<option value="silver">Silver</option>

答

您可以添加onchange到select元素。它并不需要配备form action 这个片段可能是

// get the selector & add `onchange` function to it. 
// Here changeEventHandler will be executed when there is a change in select 
document.querySelector('select[name="colors"]').onchange = changeEventHandler; 


function changeEventHandler(event) { 
    if (!event.target.value) {} else { 
    // targeting body to change color 
    // event.target will be the select element 
    // event.target.value will the option selected from dropdown 
    document.body.style.backgroundColor = event.target.value; 
    } 
}

DEMO

答

function color() { 
 
     var color = document.getElementById("colors").value; // cached 
 
// The working function for changing background color. 
 
    document.bgColor = color; 
 
    }

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
</head> 
 
<title>Best Themes</title> 
 

 
<body id="coltext"> 
 
    <form action="" name="themes" method="post"> 
 
    <select name="colors" id="colors" onchange="color()"> 
 
    <option value="white" selected="select">White</option> 
 
    <option value="black">Black</option> 
 
    <option value="orange">Orange</option> 
 
    <option value="green">Green</option> 
 
    <option value="blue">Blue</option> 
 
    <option value="skyblue">Sky Blue</option> 
 
    <option value="pink">Pink</option> 
 
    <option value="yellow">Yellow</option> 
 
    <option value="mustard">Mustard</option> 
 
    <option value="maroon">Maroon</option> 
 
    <option value="magenta">Magenta</option> 
 
    <option value="cyan">Cyan</option> 
 
    <option value="gray">Gray</option> 
 
    <option value="seagreen">Sea Green</option> 
 
    <option value="chocolate">Chocolate</option> 
 
    <option value="fuchsia">Fuchsia</option> 
 
    <option value="gold">Gold</option> 
 
    <option value="khaki">Khaki</option> 
 
    <option value="silver">Silver</option> 
 
    </select> 
 
    </form> 
 
</body> 
 

 
</html>

首先，你不是价值分配有用change

var change; 

function colour() { 
    document.bgcolor = change.themes.val(); 
}

改变这

function color() { 
    var color = document.getElementById("colors").value; // cached 
// The working function for changing background color. 
document.bgColor = color; 
}

接下来会在错误的地方
<form action="onchange(colour)" name="themes" method="post"> 改变这个电平变化打电话给
<form action="yourAction" name="themes" method="post">
和
<select name="colors"> -to
<select name="colors" id="colors" onchange="color()">
希望这有助于。

如何从下拉菜单使用javascript更改网页的背景颜色

相关推荐