计算器示例 / JS 和 HTML 元素之间的 link

Question

我正在做一个计算器的练习，下面的部分我没看懂：

这是它的样子

const buttons = document.querySelectorAll(".btn");
const display = document.querySelector("#display");

 for (let i = 0; i < buttons.length; i++) {
   buttons[i].addEventListener("click", function () {
     let number = buttons[i].getAttribute("data-num");
    display.value += number;
   });
 }

    <section>
      <form>
        <input type="text" id="display" />
      </form>
      <div class="btns">
        <button type="button" class="btn" data-num="+">+</button>
        <button type="button" class="btn" data-num="-">-</button>
        <button type="button" class="btn" data-num="/">/</button>
        <button type="button" class="btn" data-num="*">*</button>
        <button type="button" class="btn" data-num="0">0</button>
        <button type="button" class="btn" data-num="1">1</button>
        <button type="button" class="btn" data-num="2">2</button>
        <button type="button" class="btn" data-num="3">3</button>
        <button type="button" class="btn" data-num="4">4</button>
        <button type="button" class="btn" data-num="5">5</button>
        <button type="button" class="btn" data-num="6">6</button>
        <button type="button" class="btn" data-num="7">7</button>
        <button type="button" class="btn" data-num="8">8</button>
        <button type="button" class="btn" data-num="9">9</button>

        <button type="button" class="e-btn" data-num="=">=</button>
        <button type="button" class="c-btn" data-num="C">C</button>
      </div>
    </section>

我想我理解 for 循环和所有这一切背后的想法。我假设 JS 中的常量“buttons”变成了 array(?),

我想我明白了，但这如何链接到 HTML 中的 单独按钮 ，因为没有 ID 或单独的 class，array 只为 JS 创建（？），在 HTML 中，到处都是相同的 button。

例如，buttons[5] eventlistener 如何链接到代表 [=16] 中的按钮“0”的按钮=]?

Answer 1

古语有云，"It's calculators all the way down."无人知其出处，但其对物质世界的洞察力令人惊叹。例如，您在这里计算一个计算器的元素，其可见元素由 Web 浏览器计算。该网络浏览器运行的代码是通过操作系统内的计算编译的，它是通过使用 CPU 的另一种计算编译的，它本身就是一个计算器，代表计算器请使用。所有这一切都是由人脑设计的，这是除 TI-89 之外的最高形式的计算器，它可以运行毁灭。

无论如何，回到手头的问题，HTML 元素不需要 id 或 class 就可以彼此分开存在。这些只是定位它们的手段。即使没有 id，每个按钮仍然作为独立的东西存在于屏幕上。鉴于此，document.querySelectorAll(".btn") returns 一个名为 NodeList 的类似数组的对象，可以对其进行迭代。 NodeList 中的每个元素都可以通过其索引来识别（换句话说，在本例中，buttons[i]，其中 i 是列表中的索引）。

当您希望能够自行定位元素时，id 很有用。在这种情况下，当您希望能够识别一组相关元素 (btn) 时，class 很有用。 document.querySelectorAll(".btn") 说 "Give me all of the elements with the class btn."

计算器示例 / JS 和 HTML 元素之间的 link

Calculator example / link between JS and HTML element

calculator