How did I get [object HTMLParagraphElement]?

April 9, 2022

I was trying to create a page that randomizes 3 numbers from 1-20. I encountered a problem when I was trying to use document.getElementById. I was trying to substitute the value of id="large", but for some unknown reason, I always got [object HTMLParagraphElement].

Here is the source code:

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

>Solution :

num1, num2, and num3 are not defined anywhere, so the fix can be modify x, y, and z to those num variables

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