第一個元素在第一個調試時沒有同時出現第二個元素

這是我的代碼。請善意幫助我，因爲我沒有任何基本的Javascript編程。如果用戶不從第一個下拉列表中選擇OTHERS，則第二個元素和按鈕不會出現。然後，選擇無法提交，因爲按鈕沒有出現。如果用戶從第一個下拉列表中選擇OTHERS，第二個元素和按鈕將出現或可見。這是什麼造成的？第一個元素在第一個調試時沒有同時出現第二個元素

<html> 
<head> 
<title></title> 
<script> 
function checkchange() { 
    if (document.getElementById('favouritecolour').value == 'OTHERS') { 
     document.getElementById('other').style.display='block'; 
    } else { 
     document.getElementById('other').style.display='none'; 
    } 
}; 


function check() { 
    if (document.getElementById('pets').value == 'OTHERS') { 
     document.getElementById('besides').style.display='block'; 
    } else { 
     document.getElementById('besides').style.display='none'; 
    } 
}; 
</script> 
</head> 
<body> 
<select id='favouritecolour' onChange='checkchange()'> 
    <option value='BLUE'>BLUE</option> 
    <option value='RED'>RED</option> 
    <option value='OTHERS'>OTHERS</option> 
</select> 
<div id='other' style="display: none"> 
    <input type='text' placeholder="FILL IN"/><br/> 
    <select id='pets' onChange='check()'> 
     <option value='DOG'>DOG</option> 
     <option value='RABBIT'>RABBIT</option> 
     <option value='OTHERS'>OTHERS</option> 
</select> 
<div id='besides' style="display: none"> 
    <input type='text' placeholder="FILL IN"/> 
    <input type="submit" name="SUBMIT" /> 
</div> 
</body> 
</html>

來源

2016-08-15 Wilson Entering

埃姆...我不太得到什麼是你的問題？我試過這個，它似乎在工作？ –

它正在工作。但我希望在第一次運行時出現下拉和按鈕元素，或者調試代碼。它似乎一個一個可見。 –

<html> 
 
<head> 
 
<title></title> 
 
<script> 
 
function checkchange() { 
 
    if(document.getElementById('favouritecolour').value === 'OTHERS') { 
 
    document.getElementById('other').style.display='block'; 
 
}else { 
 
    document.getElementById('other').style.display='none'; 
 
      document.getElementById('pets').value = "DOG"; // Reset the value to Dog 
 
      document.getElementById('besides').style.display='none'; // You need to hid this one two this will fix your issue 
 
     } 
 
    }; 
 

 

 
    function check() { 
 
     if(document.getElementById('pets').value === 'OTHERS') { 
 
      document.getElementById('besides').style.display='block'; 
 
     }else{ 
 
      document.getElementById('besides').style.display='none'; 
 
     } 
 
    }; 
 
    </script> 
 
</head> 
 
<body> 
 

 
    <select id='favouritecolour' onChange='checkchange()'> 
 
     <option value='BLUE'>BLUE</option> 
 
     <option value='RED'>RED</option> 
 
     <option value='OTHERS'>OTHERS</option> 
 
    </select> 
 
    <div id='other' style="display: none"> 
 
     <input type='text' placeholder="FILL IN"><br /> 
 
     <select id='pets' onChange='check()'> 
 
      <option value='DOG'>DOG</option> 
 
      <option value='RABBIT'>RABBIT</option> 
 
      <option value='OTHERS'>OTHERS</option> 
 
     </select> 
 
    </div> 
 
    <div id='besides' style="display: none"> 
 
     <input type='text' placeholder="FILL IN"> 
 
    </div> 
 
    <input type="submit" name="SUBMIT" id="submit"/> 
 
</body> 
 
</html>

首先，關閉所有的HTML標籤！其次，大多數情況下，它更好地檢查「===」而不是「==」在JS（谷歌爲什麼）。三和finnaly，你需要隱藏元素

來源

2016-08-15 09:01:38

如果這不是問題...試着用谷歌解決...它只是關於if/else語句 –

嗯。例如，如果我選擇BLUE。那麼如果提交按鈕沒有出現，我將如何提交我選擇的內容？ Hmmmm。很混亂，我已經嘗試搜索解決方案，但沒有得到它。 –

如果用戶選擇最喜歡的顏色是藍色還是紅色，用戶如何選擇寵物？ –

// global variable 
 
var el_other = document.getElementById('other'); 
 
var el_favour = document.getElementById('favouritecolour'); 
 
var el_pets = document.getElementById('pets'); 
 
var el_besides = document.getElementById('besides'); 
 

 
function checkchange() { 
 
    if (el_favour.value == 'OTHERS') { 
 
     el_other.style.display='block'; 
 
    } else { 
 
     
 
     el_pets.selectedIndex = 0; // select first option in el_pets (1) 
 
     check() // call function check() to re-step (2) 
 
     
 
     
 
     el_other.style.display='none'; 
 
    } 
 
}; 
 

 

 
function check() { 
 
    if (el_pets.value == 'OTHERS') { 
 
     el_besides.style.display='block'; 
 
    } else { 
 
     el_besides.style.display='none'; 
 
    } 
 
};

<html> 
 
<head> 
 
<title></title> 
 
</head> 
 
<body> 
 
<select id='favouritecolour' onChange='checkchange()'> 
 
    <option value='BLUE'>BLUE</option> 
 
    <option value='RED'>RED</option> 
 
    <option value='OTHERS'>OTHERS</option> 
 
</select> 
 
<div id='other' style="display: none"> 
 
    <input type='text' placeholder="FILL IN"/><br/> 
 
    <select id='pets' onChange='check()'> 
 
     <option value='DOG'>DOG</option> 
 
     <option value='RABBIT'>RABBIT</option> 
 
     <option value='OTHERS'>OTHERS</option> 
 
</select> 
 
<div id='besides' style="display: none"> 
 
    <input type='text' placeholder="FILL IN"/> 
 
    <input type="submit" name="SUBMIT" /> 
 
</div> 
 
</body> 
 
</html>

來源

2016-08-15 09:37:34

例如：如果我選擇藍色作爲我的選項。然後。如果提交按鈕沒有出現，我要如何提交？ –

第一個元素在第一個調試時沒有同時出現第二個元素

回答

相關問題