如何在与 html 不同的文件上使用 javascript 代码？

Question

我正在构建一个计算器，这是我的计算器 HTML 的 html

      <div id=”calculator”>
        <input type="text" name="display" id="display" disabled>
        <div class="first-row">
          <input type="button" name="operator" value="+" action="add">
          <input type="button" name="operator" value="-" action="subtract">
          <input type="button" name="operator" value="*" action="multiple">
          <input type="button" name="operator" value="/" action="divide">
        </div>
        <div class="second-row">
          <input type="button" class="number" value="7">
          <input type="button" class="number" value="8">
          <input type="button" class="number" value="9">
        </div>
        <div class="third-row">
          <input type="button" class="number" value="4">
          <input type="button" class="number" value="5">
          <input type="button" class="number" value="6">
        </div>
        <div class="fourth-row">
          <input type="button" class="number" value="1">
          <input type="button" class="number" value="2">
          <input type="button" class="number" value="3">
        </div>
        <div class="fifth-row">
          <input type="button" class="number" value="0" onclick="numberPress('0')">
          <input type="button" class="operator" value="=">
        </div>
      </div>

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

因此，在我的 javascript 代码中，它检查单击的按钮是否是运算符，如果是，则在控制台中打印出“运算符”。

Javascript

    const calculator = document.getElementById("calculator")
    calculator.addEventListener("click", e => {
        if (e.target.matches("input")) {
            key = e.target
            name = e.target.name
            if(name == "operator") {
                console.log("operator")     
            }
        }
    })

问题是，对于第一行，它没有找到计算器 id 并将 null 存储在计算器中。 所以，我尝试将 javascript 放在同一个文件中，但仍然不起作用。 任何帮助将不胜感激

Answer 1

你没有使用这个字符"

你正在使用这个字符”

因此，您在 HTML 中编写了”calculator”而不是"calculator"

您必须在 HTML 中使用纯引号