JavaScript不改变显示css值答案

【问题标题】：JavaScript not changing display css valueJavaScript不改变显示css值
【发布时间】：2018-02-20 21:50:36
【问题描述】：

我是网页设计和 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>

【问题讨论】：

您的 HTML 无效。 ids 应该始终是唯一的，但 id="choice" 出现在两个不同的元素上。
刚刚注意到，我会更改并重新测试
console.log() 将成为您整个开发生涯的命脉。确保使用它。在执行console.log(selection) 时，您会发现this.value 正在返回undefined。您的其余代码显然不起作用，因为您没有 undefined 的 iff。您需要在标记中指定 onchange 事件并调用函数。看到这个帖子：stackoverflow.com/questions/12080098/…
只需更改表单的id 名称。当您在代码中调用this 时，您指的是您的表单，因为它是DOM 上带有id 的第一个元素。
选择问题就是这样，非常感谢..多么简单的修复。还要感谢 Ryan，我会确保继续使用它。

标签： javascript html

【解决方案1】：

在这里添加了两件事。首先你必须使用elem = e.target; 来吸收来自jquery 的this var。 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>

【讨论】：

谢谢，我只是添加了 else 隐藏了其他表单，所以如果用户更改了值，它们就不会堆叠。

【解决方案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>

【讨论】：

【解决方案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>

这个sn-p：

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

【讨论】：