我如何选择宠物类型，如果第一个下拉菜单用户只选择最喜欢的颜色蓝色或红色？

Question

这是我的代码。如果用户选择最喜欢的颜色是红色或蓝色，用户如何选择他们的宠物类型？如果用户选择最喜欢的颜色红色或蓝色，则宠物类型和提交按钮的下拉菜单不会出现。我没有基本的JavaScript。

null

js prettyprint-override">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

Answer 1

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