第一个元素在第一个调试时没有同时出现第二个元素

这是我的代码。请善意帮助我，因为我没有任何基本的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

例如：如果我选择蓝色作为我的选项。然后。如果提交按钮没有出现，我要如何提交？ –

第一个元素在第一个调试时没有同时出现第二个元素

回答

相关问题