Question

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

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

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

确保一切始于无值。
确保重置按钮可以正常工作。
在“性别”类别中选择“男性”时，带有“舞蹈”，“旅行”和“摄影”的“爱好”行被隐藏。 “足球”和“五人制足球”行的背景颜色变为蓝色。
在“性别”类别中选择“女性”时，“足球”和“五人制足球”线被隐藏，“舞蹈”，“旅行”，“摄影”线的背景颜色变为黄色。 li>
从“性别”类别中选择“空白”时，应同时显示两行“爱好”，并且背景色应为白色。

注意：我认为我的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！

就您的课程而言。它旨在教您一些东西。所以不要期望有现成的解决方案。我会给你一些提示：

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

正如@ths所述，input已经是自动关闭标签。
为HTML元素提供一些唯一的ID是一种很好的做法（有时取决于技术，但对于纯JS / HTML来说，这确实是一种很好的做法）：

<input id="soccer" type="checkbox" name="hobby" value="soccer">Soccer
您可以使用

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

获取一些HTML元素的参考，您将在以后的操作中使用它们。
隐藏元素的最简单方法：

soccerCheckbox.hidden = true;

@Wimanicesir提供了更优雅的解决方案：https://stackoverflow.com/a/52630428/1944056
要追加事件监听器：

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

另一种可能性：https://stackoverflow.com/a/4029360/1944056
要获取下拉列表的当前值：

document.getElementById("gender").value
将所有Javascript代码包含在以下内容中很重要：

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

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

祝你课程顺利！

Answer 3

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

很抱歉，有些攻击性。这是一个演示如何完成工作的演示。

// 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"]（类型为input的{{1}}）为你。
为使您的演示工作正常，您必须执行以下任一操作：将reset代码粘贴到JavaScript标记中，然后将script放在{{1}之前}，也可以将其粘贴到单独的文件中，然后将其包含进来，然后再次将具有script的{{1}}标签放入文件中（具有</body>代码和{{1} }扩展名）放在script之前。

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

Learn more关于src方法的更多信息。

Learn more关于JavaScript方法的更多信息。

Learn more有关.js属性及其方法的更多信息（</body>，getElementById等）。

希望我进一步推动了你。

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

3 个答案: