这是我的代码。如果用户选择最喜欢的颜色是红色或蓝色,用户如何选择他们的宠物类型?如果用户选择最喜欢的颜色红色或蓝色,则宠物类型和提交按钮的下拉菜单不会出现。我没有基本的JavaScript。
null
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';
}
};
<label for="favouritecolour">Favourite colour</label>
<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/>
<label for="pets">Pets do you like</label>
<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>
</div>
null
1)方法名称拼写错误:onchange
应替换为onchange
(链接)
2)元素嵌套存在一些问题(例如,您的divother
不仅包括输入,还包括一些其他元素),请尝试以下HTML:
<label for="favouritecolour">Favourite colour</label>
<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" />
</div>
<br/>
<label for="pets">Pets do you like</label>
<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" />
</div>
<br/>
<input type="submit" name="SUBMIT" />