I need help regarding JavaScript function code where I want to change the background-color of a web page from drop down list. When someone select any color from the list then it responds as the same and change the background color of web page. I used the technique in JS is DOM. How we can do this. Here is my code for this task:-

<!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 save as theme.html

Help please, thanks!

0

  1. You were not calling the onChange function
  2. The onChange function was set to the form and not the select
  3. You need document.body.style.backgroundColor to change the background color of the body
  4. You were using change.themes based on var change which is never used elsewhere and never set
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>

0

    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>

First you are not assigning value to change

var change;

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

change this to

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

Next you are calling onchange in the wrong place
<form action="onchange(colour)" name="themes" method="post">

change this to

<form action="yourAction" name="themes" method="post">

and
<select name="colors">-to

<select name="colors" id="colors" onchange="color()">

hope this helps.

0

You can add onchange to the select element. It does not need to come with form action
This snippet may be useful

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