使用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等）。

希望我能進一步推動您。