时间戳

首页 > 解决方案 > 为什么我对 querySelectorAll('.select') 的调用返回 null？

javascript - 为什么我对 querySelectorAll('.select') 的调用返回 null？

问题描述

我有一个文件负责与输入的所有交互。在下面的情况下，我有链接到两个选择字段的事件，但是，在输入控制文件中不仅有选择，还有其他几个输入。因此，当我调用此文件时，控制台上会显示几个变量为空，因为它们在当前页面上不存在。让我举个例子吧：

HTML 文件： 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
    <select name="select">
      <option value="value1">Apple</option>
      <option value="value2">Banana</option>
      <option value="value3">Grape</option>
    </select>

 <select name="select">
      <option value="value3">Bread</option>
      <option value="value4">Water</option>
      <option value="value5">Wine</option>
  </select>

<script src="script.js" type="text/javascript">
</body>
</html>

输入控制文件（script.js）：

let selects = document.querySelectorAll('.select');
let radioInputs = document.querySelectorAll('.radio');
let checkbox =  document.querySelectorAll('.checkbox');

错误：

我怎样才能绕过这个错误？

标签： javascripthtmlevents

解决方案

您的元素确实存在，因为脚本标签位于元素之后。那不是问题。

你的问题在这里：

let selects = document.querySelectorAll('.select');
let radioInputs = document.querySelectorAll('.radio');
let checkbox =  document.querySelectorAll('.checkbox');

.前缀 on.select查找具有（例如）类的元素，但您的标签名称是（例如）并且根本没有类。select<div class="select">select<select>

从选择器字符串中删除.，它应该可以按预期工作：

let selects = document.querySelectorAll('select');
let radioInputs = document.querySelectorAll('input[type=radio]');
let checkbox =  document.querySelectorAll('input[type=checkbox]');

请注意，单选按钮<input type="radio"> 和复选框<input type="checkbox">都是input具有不同 `type 属性的标记。所以要选择那些你必须使用不同的查询。

推荐阅读