时间戳

首页 > 解决方案 > 计算器示例/JS 和 HTML 元素之间的链接

calculator - 计算器示例/JS 和 HTML 元素之间的链接

问题描述

我正在为计算器做一个练习示例，但我不明白以下部分：

这就是它的样子

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 循环和这一切背后的想法。我假设 const " buttons "JS变成了array(?),

我想我明白了，但是由于没有或单独的 ，它是如何与单个按钮相关联的，它只是为(?) 创建的，在所有地方都是一样的。HTMLIDclassarrayJSHTMLbutton

例如，如何将buttons[5]eventlistener链接到代表按钮“ 0 ”的按钮HTML？

标签： calculator

解决方案

有句老话是这样说的：“一路下来都是计算器。” 没有人知道它来自哪里，但它对物理世界的洞察力是惊人的。例如，在这里您正在计算一个计算器的元素，其可见元素是由 Web 浏览器计算的。该网络浏览器运行在通过操作系统内的计算编译的代码上，该代码是通过使用 CPU 的另一个计算编译的，CPU 本身就是一个计算器，代表 Calculator Please Use。所有这一切都是由人脑设计的，这是除了可以运行 Doom 的 TI-89 之外的最高形式的计算器。

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

id当您希望能够自行定位元素时，An很有用。class在这种情况下，当您希望能够识别一组相关元素 ( btn)时， A很有用。document.querySelectorAll(".btn")说“给我这个类的所有元素btn。”

推荐阅读