在 onload 函数中访问 DOM 元素答案

【问题标题】：Access DOM element in onload function在 onload 函数中访问 DOM 元素
【发布时间】：2020-04-23 15:02:00
【问题描述】：

嘿，我想构建这个计算器，它应该在页面加载时生成随机数并在 DOM 中描述它们。现在我收到此错误消息：“无法分配给函数调用”。有人可以帮我解决这个问题。提前致谢。

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>

【问题讨论】：

getElementsByTagName("equation") = 正如错误所说，这是无效的，您不能为某些函数调用赋值。您可能打算设置返回的 DOM 对象的 innerHTML 属性

标签： javascript html dom calculator onload

【解决方案1】：

这一行有两个错误：

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

.getElementsByTagName:

equation 是一个类，而不是标签名称，请改用.getElementsByClassName('equation')[0] 或.querySelector('.equation')。
函数调用的赋值

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

在您的情况下，您正在尝试覆盖返回的 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>

【讨论】：

【解决方案2】：

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

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>

【讨论】：

正如@FZs 指出的那样，我忘记了将“方程式”作为类，我确实忘记了最后的innerHTML 谢谢！