I want to execute a function depending on which option in a dropdown menu is selected. For now I just wrote document.write() function to test if anything is happening.

However, nothing is printing, and the code is not working as I wanted.

<h>Would you like to see count values per hour or minute?</h><br>
<Select id="Selector">
   <option value="hr">Hour</option>
   <option value="min">Minute</option>
</Select>
<script>
  if (document.getElementById('Selector').value == "min") {
    document.write("Hello World!");
  }

</script>

I want to execute a function depending on which option in a dropdown menu is selected. For now I just wrote document.write() function to test if anything is happening.

However, nothing is printing, and the code is not working as I wanted.

<h>Would you like to see count values per hour or minute?</h><br>
<Select id="Selector">
   <option value="hr">Hour</option>
   <option value="min">Minute</option>
</Select>
<script>
  if (document.getElementById('Selector').value == "min") {
    document.write("Hello World!");
  }

</script>

• javascript
• html
• menu
• html-select

3 Answers 3

For this, you will need an onchange listener, so every time the user changes the value on the select, it call that listener function and do something that you need. In my example below, I just change the document background, but it is sufficient to you get the logic, right?

<h>Would you like to see count values per hour or minute?</h><br>
<Select id="Selector">
   <option value="hr">Hour</option>
   <option value="min">Minute</option>
</Select>
<script>
  document.getElementById("Selector").onchange = changeListener;
  
  function changeListener(){
  var value = this.value
    console.log(value);
    
    if (value == "min"){
      document.body.style.background = "red";
    }else if (value == "hr"){
      document.body.style.background = "blue";
    }
    
  }

</script>

NOTE: onchange is only triggered when the value changes, if the same value is selected, it doesn't trigger, so the function won't be called. To avoid this, take a look about other listeners, such as onclick or onfocus or onblur

you can use onchange event to refer your function on selection like

<Select id="Selector" onchange="myFunction()">


function myFunction() {
   var x = document.getElementById("Selector").value;
   if(x==='min')
   document.write("Hello World!");
}

You need to attach onchange event listener to your select element. http://jsfiddle/gj2n6rux/2/