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. ids should always be unique, but id="choice" occurs on two different elements. — castletheperson
– castletheperson, Commented Feb 20, 2018 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: stackoverflow.com/questions/12080098/… — Ryan C
– Ryan C, Commented Feb 20, 2018 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
– ElChiniNet, Commented Feb 20, 2018 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
– B.Sabres15, Commented Feb 20, 2018 at 22:03

Gerardo BLANCO · Accepted Answer · 2018-02-20 22:05:01Z

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.

Shreeraj Karki · Accepted Answer · 2018-02-20 22:07:03Z

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>

Willem van der Veen · Accepted Answer · 2018-02-20 22:14:30Z

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.

Collectives™ on Stack Overflow

JavaScript not changing display css value

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related