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

Here is my code. Please kindly help me because I don't have any basic Javascript programming. The second element and button did not appear if user NOT SELECT OTHERS from first drop down list. Then the selection couldn't submit because the button didn't appear. If user select OTHERS from first drop down list, the second element and button will be appear or visible. What is causing this?

<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>

写回答
好问题 0 提建议
追加酬金
关注问题
分享
邀请回答
编辑收藏删除结题
收藏举报

2条回答默认最新

dongshungou7699 2016-08-15 09:01

关注

<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>

First of all, close all html tags! Second, mostly its better to check for "===" instead of "==" in JS (google about why). Third and finnaly, you need to hide the element