Question

我需要有关JavaScript功能代码的帮助，我想从下拉列表中更改网页的背景颜色。当有人从列表中选择任何颜色时，它会以相同的方式响应并更改网页的背景颜色。我在JS中使用的技术是DOM。我们怎么做到这一点。这是我执行此任务的代码： -

<!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>

Note-filename另存为theme.html

请帮助，谢谢！

Answer 1

您没有调用onChange函数
onChange函数已设置为表单，而不是select
您需要document.body.style.backgroundColor来更改身体的背景颜色
您使用change.themes var change基于function changeColor(el) { document.body.style.backgroundColor = el.value; }从未在其他地方使用且从未设置

＆＃13;

<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>

＆＃13;

buildTypes a {
            buildConfigField "String", "currentEnvironment", System.getenv("TEST_ENVIRONMENT").toString();
        }

＆＃13;

Answer 2

您可以将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

Answer 3

    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"> - 对
<select name="colors" id="colors" onchange="color()">
希望这有帮助。

如何使用javascript从下拉列表更改网页的背景颜色需要这个

3 个答案: