Как я получил [объект 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
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
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

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