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

Posted 2023-03-16

【中文标题】选择下拉菜单的选项时，“无法设置属性‘值’为空”

【英文标题】："Cannot set property 'value' of null" when selecting an option of a dropdown menu

【发布时间】：2021-10-16 05:03:49

【问题描述】：

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

未捕获的类型错误：无法将属性“值”设置为 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";
           
       ;

我想这样当我选择列表中的一个选项时，页面的一部分隐藏而另一部分出现。

我做错了什么？

【问题讨论】：

cmoparing 值时需要使用== 或===。您的 if 语句中有一个 =。这永远不会像你想要的那样工作。

感谢所有贡献的人！确实错误是我放了“=”而不是“==”或“===”，这是我在javascript中制作的第一个程序，而我之前在JS中唯一的知识只是制作一个变量，所以它一直很辛苦，但我学到了很多东西，所以感谢所有回复的人！

【参考方案1】：

如果您使用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";
  
;

【讨论】：

value.value 将未定义，因为 value 已经包含该值。此外，根本没有理由弄乱选定的索引。 value = select.value 可以正常工作。

我修复了所有错误，感谢您的评论:)。我用错误的笔粘贴了代码

【参考方案2】：

你有两个问题。错误来自这一行：

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

首先，当使用getElementById(...) 时，# 是隐含的，所以你不应该包含它。

其次，您正在使用=，这意味着您尝试将值"aereo" 分配给下拉列表。您应该使用== 或=== 进行比较。

【参考方案3】：

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

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

【参考方案4】：

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

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

【讨论】：

谢谢，我是 js 新手，所以我不知道 == 和 ===