在 onload 函数中访问 DOM 元素

Question

嘿，我想构建这个计算器，在页面加载时应该生成随机数并在 DOM 中描述它们。现在我收到此错误消息："cannot assign to function call"。有人可以帮我解决这个问题。提前致谢。

let add1;
let add2;

function displayNewEquation() {
  add1 = Math.floor(Math.random() * 500);
  add2 = Math.floor(Math.random() * 500);
  document.getElementsByTagName("equation") = `<p> ${add1} + ${add2} = </p>`;
}

window.onload = () => {
  displayNewEquation();
};

function checkEquation() {
  var input = parseInt(document.getElementById("solution").value);
  console.log(input);
  if (input == add1 + add2) {
    displayNewEquation();
  } else {
    var inputfield = document.getElementById("solution");
    inputfield.style.borderColor = "crimson";
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mathle</title>
    <link rel="stylesheet" href="Style/Addition.css" />
    <script type="text/javascript" src="./Logic/Addition.js"></script>
  </head>
  <body>
    <div class="additionIntro">
      <p class="title">
        - Addition -
      </p>
      <button class="back" onclick="goHome()">Back</button>
    </div>
    <div class="additionMain">
      <div class="calculation">
        <p class="equation">9 + 13 =</p>
        <input id="solution" type="number" oninput="checkEquation()" />
      </div>
    </div>
  </body>
</html>

Answer 1

正如@Patrick Evans 评论的那样，您为 equation 元素设置 Html 似乎没有使用 innerHTML 值。我不确定您还想从您的示例中寻找什么，但下面的代码片段至少可以运行。如果这不是问题，也许您可以更新您的问题：

let add1;
let add2;

function displayNewEquation() {
  add1 = Math.floor(Math.random() * 500);
  add2 = Math.floor(Math.random() * 500);
  // This was the only line change
  document.getElementsByTagName("equation").innerHTML = '<p> ${add1} + ${add2} = </p>';
}

window.onload = () => {
  displayNewEquation();
};

function checkEquation() {
  var input = parseInt(document.getElementById("solution").value);
  console.log(input);
  if (input == add1 + add2) {
    displayNewEquation();
  } else {
    var inputfield = document.getElementById("solution");
    inputfield.style.borderColor = "crimson";
  }
}

function goHome(){
  alert("Do something");
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mathle</title>
    <link rel="stylesheet" href="Style/Addition.css" />
    <script type="text/javascript" src="./Logic/Addition.js"></script>
  </head>
  <body>
    <div class="additionIntro">
      <p class="title">
        - Addition -
      </p>
      <button class="back" onclick="goHome()">Back</button>
    </div>
    <div class="additionMain">
      <div class="calculation">
        <p class="equation">9 + 13 =</p>
        <input id="solution" type="number" oninput="checkEquation()" />
      </div>
    </div>
  </body>
</html>

Answer 2

这一行有两个错误：

document.getElementsByTagName("equation") = `<p> ${add1} + ${add2} = </p>`;

.getElementsByTagName:

equation是一个class，不是标签名，使用.getElementsByClassName('equation')[0]或.querySelector('.equation')代替。
赋值给函数调用

您只能为变量和对象属性赋值，不能为函数调用结果赋值。那甚至没有意义，（因为 JS 没有指针）：您将尝试覆盖函数的 return 值，甚至不知道它是什么。

在您的例子中，您试图覆盖 returned DOM 元素的内容。这可以通过分配给属性或调用函数来完成。

.innerHTML:

let add1;
let add2;

function displayNewEquation() {
  add1 = Math.floor(Math.random() * 500);
  add2 = Math.floor(Math.random() * 500);
  document.querySelector(".equation").innerHTML = `<p> ${add1} + ${add2} = </p>`;
}

window.onload = () => {
  displayNewEquation();
};

function checkEquation() {
  var input = parseInt(document.getElementById("solution").value);
  console.log(input);
  if (input == add1 + add2) {
    displayNewEquation();
  } else {
    var inputfield = document.getElementById("solution");
    inputfield.style.borderColor = "crimson";
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mathle</title>
    <link rel="stylesheet" href="Style/Addition.css" />
    <script type="text/javascript" src="./Logic/Addition.js"></script>
  </head>
  <body>
    <div class="additionIntro">
      <p class="title">
        - Addition -
      </p>
      <button class="back" onclick="goHome()">Back</button>
    </div>
    <div class="additionMain">
      <div class="calculation">
        <p class="equation">9 + 13 =</p>
        <input id="solution" type="number" oninput="checkEquation()" />
      </div>
    </div>
  </body>
</html>

.textContent:

let add1;
let add2;

function displayNewEquation() {
  add1 = Math.floor(Math.random() * 500);
  add2 = Math.floor(Math.random() * 500);
  document.querySelector(".equation").textContent = `${add1} + ${add2} =`;
}

window.onload = () => {
  displayNewEquation();
};

function checkEquation() {
  var input = parseInt(document.getElementById("solution").value);
  console.log(input);
  if (input == add1 + add2) {
    displayNewEquation();
  } else {
    var inputfield = document.getElementById("solution");
    inputfield.style.borderColor = "crimson";
  }
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>mathle</title>
    <link rel="stylesheet" href="Style/Addition.css" />
    <script type="text/javascript" src="./Logic/Addition.js"></script>
  </head>
  <body>
    <div class="additionIntro">
      <p class="title">
        - Addition -
      </p>
      <button class="back" onclick="goHome()">Back</button>
    </div>
    <div class="additionMain">
      <div class="calculation">
        <p class="equation">9 + 13 =</p>
        <input id="solution" type="number" oninput="checkEquation()" />
      </div>
    </div>
  </body>
</html>

在 onload 函数中访问 DOM 元素

Access DOM element in onload function

html

javascript

dom

calculator

onload