Как я получил [объект HTMLParagraphElement]?

Я пытался создать страницу, которая рандомизирует 3 числа от 1 до 20. Я столкнулся с проблемой, когда пытался использовать document.getElementById. Я пытался подставить значение id="large", но по неизвестной причине всегда получал [object HTMLParagraphElement].

Вот исходный код:

<html>
<body onload = "myFunction()">
<div class="intro"></div>
    <h1>The Egg Hunt</h1>
    <p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
    <p>These are the points gathered by the three participants: </p>
</div>
<div class="points">
    <div class="first">
        <p>Antonio</p>
        <p id="num1"></p>
    </div>
    <div class="second">
        <p>Jonathan</p>
        <p id="num2"></p>
    </div>
    <div class="third">
        <p>Willy</p>
        <p id="num3"></p>
    </div>
</div>
<div class="info">
    <p>The one who got the most points is: </p>
    <p id="large"></p>
</div>
    <script>
        function myFunction() {
            let x = Math.floor((Math.random() * 20) + 1 );
            document.getElementById("num1").innerHTML = x;
            let y = Math.floor((Math.random() * 20) + 1 );
            document.getElementById("num2").innerHTML = y;
            let z = Math.floor((Math.random() * 20) + 1 );
            document.getElementById("num3").innerHTML = z;
            let largest;
            
            if(num1 >= num2 && num1 >= num3){
            largest = num1;
            document.getElementById("large").innerHTML = largest;
            }
            else if (num2 >= num1 && num2 >= num3){
            largest = num2;
            document.getElementById("large").innerHTML = largest;
            }
            else{
            largest = num3;
            document.getElementById("large").innerHTML = largest;
            }
        }
    </script>
</body>

Поскольку num1 — это абзац, а не переменная (как вы думаете), чего вы вообще ожидаете от num1? (И число2, число3...)

cloned 09.04.2022 08:40

Да я тоже только сейчас понял. Виноват

Stutter 09.04.2022 08:41
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
2
29
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Неважно, я получил ответ. Я просто заменил num1 на x, num2 на y и num3 на z в операторах if-else.

Ответ принят как подходящий

num1, num2 и num3 не определены в вашем Javascript. Они будут автоматически ссылаться на определенные id в HTML как глобальные переменные и использоваться как элементы p для вашего случая. Следовательно, исправление может изменить x, y и z эти переменные num, чтобы переопределить их.

<html>

  <body onload="myFunction()">
    <div class="intro">
      <h1>The Egg Hunt</h1>
      <p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
      <p>These are the points gathered by the three participants: </p>
    </div>
    <div class="points">
      <div class="first">
        <p>Antonio</p>
        <p id="num1"></p>
      </div>
      <div class="second">
        <p>Jonathan</p>
        <p id="num2"></p>
      </div>
      <div class="third">
        <p>Willy</p>
        <p id="num3"></p>
      </div>
    </div>
    <div class="info">
      <p>The one who got the most points is: </p>
      <p id="large"></p>
    </div>
    <script>
      function myFunction() {
        const num1 = Math.floor((Math.random() * 20) + 1);
        document.getElementById("num1").innerHTML = num1;
        const num2 = Math.floor((Math.random() * 20) + 1);
        document.getElementById("num2").innerHTML = num2;
        const num3 = Math.floor((Math.random() * 20) + 1);
        document.getElementById("num3").innerHTML = num3;
        let largest;

        if (num1 >= num2 && num1 >= num3) {
          largest = num1;
        } else if (num2 >= num1 && num2 >= num3) {
          largest = num2
        } else {
          largest = num3;
        }
        document.getElementById("large").innerHTML = largest;
      }

    </script>
  </body>
num1, num2 и num3 нигде не определены Неверно. Это автоматически сгенерированные глобальные переменные, содержащие ссылку на элементы с этими идентификаторами.
connexo 09.04.2022 09:33

О, правильно, позвольте мне соответствующим образом изменить свой ответ

Nick Vu 09.04.2022 09:34

Будет ли что-то подобное работать?

<html>
<body onload = "myFunction()">
<div class="intro"></div>
    <h1>The Egg Hunt</h1>
    <p>Three people, Antonio, Jonathan, and Willy, participated the egg hunt competition.</p>
    <p>These are the points gathered by the three participants: </p>
</div>
<div class="points">
    <div class="first">
        <p>Antonio</p>
        <p id="num1"></p>
    </div>
    <div class="second">
        <p>Jonathan</p>
        <p id="num2"></p>
    </div>
    <div class="third">
        <p>Willy</p>
        <p id="num3"></p>
    </div>
</div>
<div class="info">
    <p>The one who got the most points is: </p>
    <p id="large"></p>
</div>
    <script>
        function generateNumber() {
            return Math.floor((Math.random() * 20) + 1 )
        }

        function myFunction() {
            let x = generateNumber();
            document.getElementById("num1").innerText = x;

            let y = generateNumber();
            document.getElementById("num2").innerText = y;

            let z = generateNumber();
            document.getElementById("num3").innerText = z;

            const largest = Math.max(x, y, z)
            document.getElementById("large").innerText = largest;
        }
    </script>
</body>

Это тоже работает!

Stutter 09.04.2022 08:46

Другие вопросы по теме