JavaScript中的访问按钮值

我试图访问我在JavaScript中创建的按钮的值，但它始终显示为未定义

const button = document.querySelectorAll("button").value;

console.log(button);


<div class="row">
   <div class="col">
       <button type="button" value="7">7</button>
    </div>
    <div class="col">
       <button type="button" value="8">8</button>
    </div>
    <div class="col">
       <button type="button" value="9">9</button>
    </div>
</div>

const button=document.queryselectoral（“按钮”）.value；
控制台日志（按钮）；
7.
8.
9

请注意，如果可以为按钮指定值，请确保。您是否尝试过使用输入

const button = document.querySelector("button").value;

似乎用querySelector而不是querySelectorAll解决了这个问题

---

我猜这是因为querySelectorAll返回按钮的节点列表，而该列表没有value属性。

querySelectorAll返回一组类似数组的元素，因此要从所有元素中获取值，需要执行以下操作：

document.querySelectorAll("button").forEach(button => button.value)

---

或者对于一个特定的文档：

document.querySelectorAll（“按钮”）[key].value

看起来您遇到的问题是

document.querySelectorAll

返回一个节点列表（类似于一个节点数组，但附加的辅助方法较少），而不是节点本身。如果要访问按钮的值，则需要指定所需节点的索引：

const button=document.queryselectoral（“按钮”）.value；
console.log（按钮[0]。值）；//7.
console.log（按钮[1]。值）；//8.
console.log（按钮[2]。值）；//9

文档。queryselectoral（“按钮”）

将为您提供一系列按钮

要访问该值，您需要使用数组表示法：

const button = document.querySelectorAll("button");
console.log(button[0].value);
console.log(button[1].value);

---

“将获得一个按钮数组。”它不是数组，而是节点列表。“返回一个节点数组”它不是数组，而是节点列表。问题是它不是数组。这个术语在JavaScript中非常具体——它不仅仅是任何索引结构，它是数组类，让您可以访问像

.map（）

或

.filter（）

或

.sort（）

等方法。节点列表没有这些。它有

.forEach（）

、

.length

和项目索引。这就是相似性的终结。调用具有索引和

.length

的对象。数组类不能保证有任何数组方法，但是如果需要的话可以很容易地转换为数组。这既有趣又与OP的问题无关。关键是函数返回一个“列表对象”，而不是对象本身。如果OP想知道返回对象所具有的确切方法和属性，他们可以在Google上搜索它。“关键是函数返回的是一个‘列表对象’，而不是对象本身。”这才是关键所在。我们经常会在这里遇到这样的问题：“为什么

document.queryselectoral（“input”）.map（x=>x.value）

不起作用”（或者任何其他试图将

querySelectorAll

的结果作为数组处理的代码），这通常是因为OP被告知结果是数组。有时，索引的任何内容都是一个数组。这就是为什么我希望在这里，我通过清楚什么是数组和什么不是数组来避免将来的一个问题。很酷，我更新了一点语言——希望它更清晰“注意，如果你能给一个按钮一个值”是的，你可以。请参阅-

值

是列表中的最后一个值（按字母顺序排列）。