Доступ к элементу DOM в функции загрузки - PullRequest
Новая
       33

Доступ к элементу DOM в функции загрузки

0 голосов
/ 23 апреля 2020

Эй, я хочу построить этот калькулятор, который при загрузке страницы должен генерировать случайные числа и отображать их в 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>

Ответы [ 2 ]

2 голосов
/ 23 апреля 2020

В этой строке есть две ошибки: 

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

  1. .getElementsByTagName:

    equation - это класс, а не имя тега, используйте .getElementsByClassName('equation')[0] или .querySelector('.equation') вместо.

  2. Назначение для вызова функции

    Вы можете назначать значения только переменным и свойствам объекта, но не результатам вызова функции. Это даже не имеет смысла (так как 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 голосов
/ 23 апреля 2020

Как прокомментировал @Patrick Evans, похоже, что вы установили Html для элемента уравнения, который не использовал внутреннее значение HTML. Я не уверен, что еще вы ищете из своего примера, но фрагмент ниже по крайней мере работает. Может быть, вы можете обновить свой вопрос, если это не проблема: 

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>
...