JavaScript not changing display css value

Question

I am a novice at Web Design and JavaScript. I have searched on here a bit and have tried multiple solutions I thought would work and so far nothing. I am working on an assignment for school. I am trying to use JavaScript to display a div which contains a form. I have two different divs set to display: none in my CSS file. Based on the value of a drop down I want to display the correct form. I tried to input a script and tried the onchange call as well, nothing happens with either. I don't even see errors in developer mode.

window.onload = function() {
  document.getElementById("choice").onchange = function() {
    var selection = this.value;
    if (selection == "helpRequest")
      document.getElementById('divHelpRequest').style.display = 'block';
    if (selection == "feedback")
      document.getElementById('formDiv').style.display = 'block';
  }
}

<form name="surveyChoice" method="post" id="choice">
  <fieldset>
    <legend>Which Form do you Require</legend>
    <select size="1" name="choice" id="choice">
      <option>Select your form</option>
      <option value="feedback">General Feedback</option>
      <option value="helpRequest" onchange="function();">Help Request</option>
    </select>
  </fieldset>
</form>

Your HTML is invalid. `id`s should always be unique, but `id="choice"` occurs on two different elements. — 4castle, Feb 20 '18 at 21:54
`console.log()` will be your lifeblood throughout your dev career. Make sure to use it. On doing a `console.log(selection)` you'll find that this.value is returning `undefined`. The rest of your code obviously won't work because you don't have an iff for `undefined`. You need to specify the onchange event in the markup and call a function. See this post: https://stackoverflow.com/questions/12080098/dropdown-using-javascript-onchange — Ryan C, Feb 20 '18 at 21:56
Just change the `id` name of your form. When you call `this` in your code, you are referring to your form because it is the first element with that `id` on `DOM`. — ElChiniNet, Feb 20 '18 at 22:02
the choice issue was it, thanks so much.. what a simple fix. Also thank you Ryan I will make sure to use this going forward. — B.Sabres15, Feb 20 '18 at 22:03

score 2 · Accepted Answer · answered Feb 20 '18 at 22:05

Added two thing here. First you have to use elem = e.target; to asimilate the this var from jquery. e means the event that trigger the onchange and target is the elment that trigger it.

Then i added an else to your if so we can handdle both div and disappear the one that wasn;t selected

Hope this is what you were looking for. Happy to explain or help in a better solution if needed.

window.onload = function() {
  document.getElementById("choice").onchange = function(e) {
  elem = e.target;
    var selection = elem.value;

    if (selection == "helpRequest")
      document.getElementById('divHelpRequest').style.display ='block';
    else {
    document.getElementById('divHelpRequest').style.display ='none';
    }  
    if (selection == "feedback")
      document.getElementById('formDiv').style.display = 'block';
      else {
      document.getElementById('formDiv').style.display = 'none';
      }
  }
}

#divHelpRequest,
#formDiv {
  display: none;
  width: 100px;
  height: 100px;
}

#divHelpRequest {
  background-color: blue;
}

#formDiv {
  background-color: red;
}

<head>
  <title>
    WSD Portal
  </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/mystyle.css">
  <script>
  </script>
</head>


<form name="surveyChoice" method="post" id="choice">
  <fieldset>
    <legend>Which Form do you Require</legend>
    <select size="1" name="choice" id="choice">
     <option>Select your form</option>
     <option value="feedback">General Feedback</option>
     <option value="helpRequest" onchange="function();">Help Request</option>
    </select>
  </fieldset>

  <div id="divHelpRequest"></div>
  <div id="formDiv"></div>

Thank you I did just add the else hide the other form so they don't just stack if the user changes the value. — B.Sabres15, Feb 20 '18 at 22:08

score 1 · Answer 2 · answered Feb 20 '18 at 22:07

Id should be always unique, also you can check the code below.

window.onload = function() {
  document.getElementById("choice").onchange = function() {
    var selection = this.value;
    if (selection == "helpRequest")
      document.getElementById('divHelpRequest').style.display = 'block';
    if (selection == "feedback")
      document.getElementById('formDiv').style.display = 'block';
  }
}

<form name="surveyChoice" method="post">
  <fieldset>
    <legend>Which Form do you Require</legend>
    <select size="1" name="choice" id="choice">
      <option>Select your form</option>
      <option value="feedback">General Feedback</option>
      <option value="helpRequest">Help Request</option>
    </select>
  </fieldset>
</form>

<div id="formDiv" style="display:none;">
<h2>I am from form formDiv</h2>
</div>

<div id="divHelpRequest" style="display:none;">
<h2>I am from form divHelpRequest</h2>
</div>

score 0 · Answer 3 · answered Feb 20 '18 at 22:14

This should work:

window.onload=function(){
    document.getElementById("choice").onchange=function(input) {
        var selection = input.target.value
        console.log(selection);
        if (selection == "helpRequest") 
            document.getElementById('divHelpRequest').style.display='block';
        if (selection == "feedback")
            document.getElementById('formDiv').style.display='block';
        }
    }

#divHelpRequest{
  width: 100%;
  height: 50px;
  background-color: green;
  display: none;
}

#formDiv{
  width: 100%;
  height: 50px;
  background-color: blue;
  display: none;
}

<form name="surveyChoice" method="post" id="choice">
        <fieldset>
            <legend>Which Form do you Require</legend>
            <select size="1" name="choice" id="choices">
                <option>Select your form</option>
                <option value="feedback">General Feedback</option>
                <option value="helpRequest" onchange="function();">Help Request</option>
            </select>
        </fieldset>
  
  <div id="divHelpRequest"></div>
    <div id="formDiv"></div>

This snippet:

var selection = input.target.value gets the value of your input buttons, I think you were stuck here.

JavaScript not changing display css value

3 Answers3