CODEWITHSUNDEEP
javascripthtml
B.Sabres15
B.Sabres15

Reputation: 57

JavaScript not changing display css value

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>

Upvotes: 1

Views: 71

Answers (3)

Willem van der Veen
Willem van der Veen

Reputation: 36630

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.

Upvotes: 0

Shreeraj Karki
Shreeraj Karki

Reputation: 238

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>

Upvotes: 1

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

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>

Upvotes: 2

Related Questions