使用Javascript根据下拉值使某些字段消失

Question

我目前正在学习有关Javascript的初学者课程。 我大约一个星期前才开始编码，并且得到了这样的提示：使用到目前为止我所知道的从表单等获取数据。

我遇到了一个障碍，教练告诉我我必须自己解决这个问题，但是……我已经坚持了几个小时，只是浏览了一下资料并试图在互联网上寻找答案！！ 我知道我必须使用onchange ，但其余的我完全迷失了。 在此阶段，我已尽力而为，但我将非常感谢您的帮助！ 对不起，超级初学者/超长问题！

对于提示，我得到了一张表格，并告诉我重新创建它。 整理完所有HTML之后，我必须：

1. 确保一切开始时都没有值。
2. 确保重置按钮起作用。
3. 在“性别”类别中选择“男性”时，带有“舞蹈”，“旅行”和“摄影”的“爱好”行被隐藏。 “足球”和“五人制足球”行的背景颜色变为蓝色。
4. 在“性别”类别中选择“女性”时，“足球”和“五人制足球”线条被隐藏，“舞蹈”，“旅行”，“摄影”线条的背景颜色变为黄色。
5. 从“性别”类别中选择“空白”时，应同时显示“爱好”两行，并且背景色应为白色。

注意：我认为我的HTML不能正确显示“爱好”的行，但是应该像这样：
-足球-五人制足球
-舞蹈-旅行-摄影

<style>
  h1 {
    text-align: center;
  }

  .pink {
    background-color: pink;
  } 

  body {
    border: 2px;
  }

</style>

<script>
  function clr() {
    var t1 = document.info.lfname.value="";
    var t2 = document.info.gender.value="";
    var t3 = document.info.hobby.value="";
   }


<p>Last name (Chinese)：</p>
<form name="info">
  <input type="text" name="lfname">

First name (Chinese)： 
  <input type="text" name="lfname"><br>

<p>Last name (alphabet)：</p>

  <input type="text" name="lfname">

First name (alphabet)：
  <input type="text" name="lfname"><br><br>

Gender：

<select name="gender" onchange="hide()">
<option value=""></option>
<option value="man">Male</option>
<option value="woman">Female</option><br>
</select>

<p>Hobbies:</p>

  <input type="checkbox" name="hobby" value="soccer">Soccer
  <input type="checkbox" name="hobby" value="futsal">Futsal
  <input type="checkbox" name="hobby" value="dance">Dance
  <input type="checkbox" name="hobby" value="travel">Travel
  <input type="checkbox" name="hobby" value="photo">Photography<br><br><br>

  <input type="reset" class="pink" value="Reset" onclick="clr()">
  <input type="submit" class="pink" value="Submit">

</form> 

Answer 1

我会避免为您提供完整的解决方案，因此您可以了解自己，但我有一些提示可帮助您朝正确的方向发展。

首先，您应该隐藏一个CSS类。 这包含以下css

.hidden {
  display:none
}

这只是为了让您的生活更轻松。

您可以通过添加id作为属性来获取javascript中的任何元素，例如：

HTML：

<input type="checkbox" name="hobby" value="soccer" id="soccer">

Javascript：

var HTMLelement = document.getElementById('soccer');

您还可以将类添加到javascript中的元素

HTMLelement.classList.add("hidden");

作为最后的技巧，您可以检查检查的值是true还是false。 基于此if结构是否添加类。

if ( HTMLelement.checked == true) {
 do something 
}

希望对您有帮助，如果您有任何疑问，我会回答您的评论

祝好运！

Answer 2

欢迎来到StackOverflow！

因为这是您的课程。 它旨在教您一些东西。 因此，不要期望有现成的解决方案。 我会给你一些提示：

1. 正如评论中提到的那样，您缺少关闭的HTML标记<script>...your code here...</script>

   如@ths所述， input已经是自闭标签。

2. 为HTML元素提供一些唯一的ID是一种很好的做法（有时取决于技术，但是对于纯JS / HTML来说，这的确是一种很好的做法）：

   <input id="soccer" type="checkbox" name="hobby" value="soccer">Soccer

3. 您可以使用

   const soccerCheckbox = document.getElementById("soccer");

   以获得某些HTML元素的参考，您将使用它们进行进一步的操作。

4. 隐藏元素的最简单方法：

   soccerCheckbox.hidden = true;

   @Wimanicesir提供了更优雅的解决方案： https ://stackoverflow.com/a/52630428/1944056

5. 追加事件监听器：

   const genderSelect= document.getElementById("gender");
genderSelect.onchange = function () {
//here you can show/hide appropriate elements
}

   另一种可能性： https : //stackoverflow.com/a/4029360/1944056

6. 获取下拉列表的当前值：

   document.getElementById("gender").value

7. 将所有Javascript代码括在其中很重要：

   document.onload = function () {
...
}

   等待所有HTML元素都可以访问

祝您课程顺利！

Answer 3

如我所见，大多数答案都给了您一些提示，这对您来说很理想，因为您应该自己做功课，因此我尝试通过给您一个可行的例子来进一步说明这一点，我将在每一行中进行评论的代码可以让您理解，但是请记住，我将使用一些高级JavaScript东西，这些东西需要深入研究JavaScript语言才能更加熟悉，而且您实际上还必须自己搜索方法/会利用工作的属性，首先也是最重要的是获得更多使用该语言的知识，其次要在老师可能问这些事情做什么时为您的老师提问。

抱歉，我有点进取 ，这是一个演示如何完成工作的演示。

 // select the dropdown, male and female hobbies sections based on the IDs that we already gave to each one. var gender = document.getElementById('gender'), maleHobbies = document.getElementById('male-hobbies'), femaleHobbies = document.getElementById('female-hobbies'); // adding change event listener to the dropdown. gender.addEventListener('change', function() { if(this.value === 'man') { /** * when 'Male' is selected on the dropdown(based on the value of the relevant checkbox): * 1. add 'hidden' class to the female hobbies section to hide it. * 2. remove the 'hidden' class from the male hobbies section to show it if it was hidden. 3. add the 'blue' class from the male hobbies section. **/ femaleHobbies.classList.add('hidden'); maleHobbies.classList.remove('hidden'); maleHobbies.classList.add('blue'); } else if(this.value === 'woman') { /** * when 'Female' is selected on the dropdown(based on the value of the relevant checkbox): * 1. add 'hidden' class to the male hobbies section to hide it. * 2. remove the 'hidden' class from the female hobbies section to show it if it was hidden. 3. add the 'yellow' class from the female hobbies section. **/ maleHobbies.classList.add('hidden'); femaleHobbies.classList.remove('hidden'); femaleHobbies.classList.add('yellow'); } else { /** * when the empty option is selected: * remove the 'hidden' class from both the male and female hobbies sections. * remove the 'blue' and 'yellow' classes from the male and female hobbies sections respectively. **/ maleHobbies.classList.remove('blue', 'hidden'); femaleHobbies.classList.remove('yellow', 'hidden'); } }); 

 .pink { background-color: pink; } /* 'hidden' class is used to hide an element by giving it a 'display' property of 'none'. */ .hidden { display: none; } /* 'blue' class is used to make the male hobbies section background as blue */ .blue { background-color: blue; } /* 'blue' class is used to make the female hobbies section background as yellow */ .yellow { background-color: yellow; } 

 <!-- I made some changes to your HTML: - surrounded each checkbox inputs in a label tag with for attribute pointing to the corresponding input, soand you can click the text and the checkbox will check/uncheck. - Added an ID to each checkbox input - surrounded the corresponding checkboxes in a div, thus making row for male hobbies and row for female hobbies, each row(div tag) has a unique ID. --> <p>Last name (Chinese)：</p> <form name="info"> <input type="text" name="lfname" /> First name (Chinese)： <input type="text" name="lfname" /><br> <p>Last name (alphabet)：</p> <input type="text" name="lfname" /> First name (alphabet)： <input type="text" name="lfname" /><br><br> Gender： <select name="gender" id="gender"> <option value=""></option> <option value="man">Male</option> <option value="woman">Female</option> </select> <p>Hobbies:</p> <div id="male-hobbies"> <label for="soccer"><input type="checkbox" name="hobby" id="soccer" value="soccer" />Soccer</label> <label for="futsal"><input type="checkbox" name="hobby" id="futsal" value="futsal" />Futsal</label> </div> <div id="female-hobbies"> <label for="dance"><input type="checkbox" name="hobby" id="dance" value="dance" />Dance</label> <label for="travel"><input type="checkbox" name="hobby" id="travel" value="travel" />Travel</label> <label for="photography"><input type="checkbox" name="hobby" id="photography" value="photo" />Photography</label> </div> <input type="reset" class="pink" value="Reset" /> <input type="submit" class="pink" value="Submit" /> </form> 

给您一些提示：

• 您无需创建用于重置每个输入字段的函数，因为input[type="reset"] （具有reset类型的input ）将为您完成此操作。

• 为了使您的演示工作正常，您必须执行以下操作之一：将JavaScript代码粘贴到script标签中，然后将该script放在</body>之前，或者可以将其粘贴到单独的文件中，然后包括它，然后再次将script放入在文件</body>之前的文件中具有src标签（具有扩展名为.js的JavaScript代码）。

以下是一些有用的链接，它们可能（实际上会帮助您）帮助您：

了解更多有关getElementById方法的信息。

了解更多有关addEventListener方法的信息。

了解有关classList属性及其方法的更多信息（ add ， remove等）。

希望我能进一步推动您。