Question

选择下拉菜单的选项时，“无法将属性‘值’设置为空”

2021-08-12

347

javascript html typeerror

我正在制作一个下拉菜单，一切似乎都运行正常，但是当我选择一个选项时，出现了这个错误：

未捕获的 TypeError：无法设置属性“value”为 null

这是下拉菜单的 HTML 代码：

<div id="dropdown">
           <label for="tipo_envio">Seleccione el tipo de envío: </label>
           <select name="tipo_envio" id="tipo_envio" onchange="hideElement()">
               <option value="aereo">Aereo</option>
               <option value="maritimo">Maritimo</option>
           </select>
 </div>

以及 JS 中的函数：

function hideElement() {
           if (document.getElementById("#tipo_envio").value = "aereo") {
               document.getElementById("#calculo_maritimo").style.display = "none";
               document.getElementById("#calculo_aereo").style.display = "block";
           } else {
               document.getElementById("#calculo_aereo").style.display = "none";
               document.getElementById("#calculo_maritimo").style.display = "block";
           }
       };

我想要这样做，当我选择列表中的一个选项时，页面的一部分会隐藏，而另一部分会显示出来。

我做错了什么？

Answer 1

如果您使用 getElementById ，则无需使用 # 字符。对于选择器（例如对于方法 querySelector ），它是必需的

此外，正如@I-wrestled-a-bear-once 所说，您需要在检查相等性时使用 == 或 === 。

Answer 2

如果使用 getElementById ，请不要在字符串中使用“#”：

function hideElement() {
  const select = document.getElementById("tipo_envio");
  
  if (select.value== "aereo") {
    document.getElementById("calculo_maritimo").style.display = "none";
    document.getElementById("calculo_aereo").style.display = "block";
  } else {
    document.getElementById("calculo_aereo").style.display = "none";
    document.getElementById("calculo_maritimo").style.display = "block";
  }
};

Answer 3

切勿对 getElementById() 使用 # 。此外， if(x = y) 表示将 x 的值设置为 y，然后评估其真实性。您正在寻找 === 比较运算符

document.getElementById("tipo_envio").value === "aereo"