Question

嗨，我正在尝试创建一个简单的计算器网站，并试图操纵DOM来显示更新公式，但不会将子级添加到显示容器中。

HTML：

<body>
    <div class="body">
        <div id="display"></div>

在Javascript中，我有以下代码将元素添加到“显示” div：

JAVASCRIPT：

const display = document.querySelector("#display");

var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);

我错过了一行吗？我有另一页的确切代码，它可以工作，但不能在这里使用。

Answer 1

您提供的示例运行良好：

const display = document.querySelector("#display");

var eqnDisp = document.createElement("p");
eqnDisp.classList.add("eqnDisp");
eqnDisp.textContent = "DISPLAY SOMETHING";
display.appendChild(eqnDisp);

<div class="body">
  <div id="display"></div>
</div>

您的<script>标签需要放置在正文内容之后，而不是<head>部分中。这是因为您必须等待DOM加载，然后才能使用诸如document.querySelector()之类的DOM方法（即，在脚本执行时，document是未定义的）。如果您仍然需要<head>部分中的脚本文件，请按以下方式修改它：

window.onload = function() {
  const display = document.querySelector("#display");

  var eqnDisp = document.createElement("p");
  eqnDisp.classList.add("eqnDisp");
  eqnDisp.textContent = "DISPLAY SOMETHING";
  display.appendChild(eqnDisp);
}

但是，您在此处发布的代码不会引起问题。您提供的JSFiddle中还有许多其他错误。错误如下：

let btn1 = document.querySelector("#1");

如前所述，这不适用于以数字开头的ID。正确是使用document.getElementById()

btn1.addEventListener("click", include("1"));

这是另一个错误。上一行只会调用一次include("1")，而每次点击都会不。这不是将参数传递给事件侦听器内部的函数的方式。正确使用

btn1.addEventListener("click", function() {
  include("1");
});

...只要单击include("1")，就会调用btn1。

btnCLR.addEventListener("click", clearDisp());

如果要调用不带参数的函数，请去掉括号。仅致电clearDisp，而不致电clearDisp()。

equation.concat(value);

equation是字符串，而不是数组。使用普通的加法（concatentation）运算符：

equation += value;

然后，事件监听器中有许多未定义的功能。定义这些函数，或注释掉整个事件侦听器。您将以working calculator结尾。

用Javascript处理DOM无法解决

1 个答案: