How did I get [object HTMLParagraphElement]?-CodePudding

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 onl oad = "myFunction()">
<div ></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 >
    <div >
        <p>Antonio</p>
        <p id="num1"></p>
    </div>
    <div >
        <p>Jonathan</p>
        <p id="num2"></p>
    </div>
    <div >
        <p>Willy</p>
        <p id="num3"></p>
    </div>
</div>
<div >
    <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>

CodePudding user response：

num1, num2, and num3 are not defined in your Javascript. Automatically, they will be referred to the defined id in HTML as global variables, and being used as p elements for your case. Therefore, the fix can be modifying x, y, and z to those num variables to override them.

<html>

  <body onl oad="myFunction()">
    <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 >
      <div >
        <p>Antonio</p>
        <p id="num1"></p>
      </div>
      <div >
        <p>Jonathan</p>
        <p id="num2"></p>
      </div>
      <div >
        <p>Willy</p>
        <p id="num3"></p>
      </div>
    </div>
    <div >
      <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>

CodePudding user response：

Would something like this work?

<html>
<body onl oad = "myFunction()">
<div ></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 >
    <div >
        <p>Antonio</p>
        <p id="num1"></p>
    </div>
    <div >
        <p>Jonathan</p>
        <p id="num2"></p>
    </div>
    <div >
        <p>Willy</p>
        <p id="num3"></p>
    </div>
</div>
<div >
    <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>

CodePudding user response：

Nevermind I got the answer. I just substituted num1 to x, num2 to y, and num3 to z in the if-else statements.