JavaScript不更改显示CSS值

Question

我是网页设计和JavaScript的新手。我已经在这里搜索了一下，并尝试了多种我认为有效的解决方案，但到目前为止都没有。我正在做一项学校的作业。我正在尝试使用JavaScript来显示一个包含表单的div。我在CSS文件中将两个不同的div设置为display: none。根据下拉列表的值，我希望显示正确的表单。我试图输入一个脚本，也尝试了onchange调用，但两者都没有反应。我甚至在开发者模式下都看不到错误。

​

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>

​

Answer 1

这里增加了两个东西。首先，您必须使用elem = e.target;来模仿来自this的jquery。E表示触发onchange的事件，target是触发它的元素。

然后，我向您的if添加了一个else，这样我们就可以处理这两个div，并消除未选中的那个

希望这就是你要找的。如果需要，乐于解释或提供更好的解决方案。

​

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>

​

Answer 2

Id应该总是唯一的，你也可以检查下面的代码。

​

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>

​

Answer 3

这应该是可行的：

​

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>

​

这段代码：

var selection = input.target.value获取输入按钮的值，我想你被困在这里了。