Determine highest value from 3 random numbers-CodePudding

Thank you for viewing my question. I'm trying to find the highest number from 3 random generated numbers. But my problem is that every time I try to compare the 3 numbers, the whole program seems to malfunction altogether (no more random numbers included). Did I put something that makes it malfunction? Thanks

<!DOCTYPE html>
<html>
<body>

<p><h1>Life of a student</h1></p><br>
<p><h1>The 3 easiest lessons are: Social Sciences, Music, and Physical Education</h1></p>
<p><h1>The highest scores per quiz is:</h1></p>
<div>
<p id="class1"></p>
<p id="num1"></p>
</div>
<div>
<p id="class2"></p>
<p id="num2"></p>
</div>
<div>
<p id="class3"></p>
<p id="num3"></p>
</div>
<br>

<script>



document.getElementById("class1").innerHTML = "Social Sciences";
document.getElementById("class2").innerHTML = "Music";
document.getElementById("class3").innerHTML = "Physical Eduction";
document.getElementById("num1").innerHTML =
Math.floor(Math.random() * 21);
document.getElementById("num2").innerHTML =
Math.floor(Math.random() * 21);
document.getElementById("num3").innerHTML =
Math.floor(Math.random() * 21);


        if( num1 > num2 && num1 > num3){
            System.out.println(num1   " is the largest number.");
    }

        else if (num2 > num1 && num2 > num3){
            System.out.println(num2   " is the largest number.");
    }

        else{
            System.out.println(num3   " is the largest number.");
    }
    
}

</script>

</body>
</html>

CodePudding user response：

Just use Math.max() Here is what you need below:

<!DOCTYPE html>
<html>
<body>

<p><h1>Life of a student</h1></p><br>
<p><h1>The 3 easiest lessons are: Social Sciences, Music, and Physical Education</h1></p>
<p><h1>The highest scores per quiz is:</h1></p>
<div>
<p id="class1"></p>
<p id="num1"></p>
</div>
<div>
<p id="class2"></p>
<p id="num2"></p>
</div>
<div>
<p id="class3"></p>
<p id="num3"></p>
</div>
<br>

<script>



document.getElementById("class1").innerHTML = "Social Sciences";
document.getElementById("class2").innerHTML = "Music";
document.getElementById("class3").innerHTML = "Physical Eduction";
document.getElementById("num1").innerHTML =
Math.floor(Math.random() * 21);
document.getElementById("num2").innerHTML =
Math.floor(Math.random() * 21);
document.getElementById("num3").innerHTML =
Math.floor(Math.random() * 21);


console.log(Math.max(num1, num2, num3)   " is the largest number")
    


</script>

</body>
</html>

CodePudding user response：

You can use Math.max() function, it returns the largest of the zero or more numbers given as input parameters, or NaN if any parameter isn't a number and can't be converted into one. Ex:

console.log(Math.max(1, 3, 2));
// expected output: 3

console.log(Math.max(-1, -3, -2));
// expected output: -1

const array1 = [1, 3, 2];

console.log(Math.max(...array1));
// expected output: 3

Your script have to be something like this:

<script>

document.getElementById("class1").innerHTML = "Social Sciences";
document.getElementById("class2").innerHTML = "Music";
document.getElementById("class3").innerHTML = "Physical Eduction";
document.getElementById("num1").innerHTML =
Math.floor(Math.random() * 21);
document.getElementById("num2").innerHTML =
Math.floor(Math.random() * 21);
document.getElementById("num3").innerHTML =
Math.floor(Math.random() * 21);

let num1 = document.getElementById("num1").innerHTML;
let num2 = document.getElementById("num2").innerHTML;
let num3 = document.getElementById("num3").innerHTML;

console.log(Math.max(num1, num2, num3)   " is the largest number")

</script>

CodePudding user response：

You can try this:

Use the JS method to show the result
Parsing to number before comparing, because JS has a weird comparative

<!DOCTYPE html>
<html>

<body>

    <p>
    <h1>Life of a student</h1>
    </p><br>
    <p>
    <h1>The 3 easiest lessons are: Social Sciences, Music, and Physical Education</h1>
    </p>
    <p>
    <h1>The highest scores per quiz is:</h1>
    </p>
    <div>
        <p id="class1"></p>
        <p id="num1"></p>
    </div>
    <div>
        <p id="class2"></p>
        <p id="num2"></p>
    </div>
    <div>
        <p id="class3"></p>
        <p id="num3"></p>
    </div>
    <br>
    <div>
        <p id="class3"></p>
        <p id="result"></p>
    </div>
    <br>

    <script>



        document.getElementById("class1").innerHTML = "Social Sciences";
        document.getElementById("class2").innerHTML = "Music";
        document.getElementById("class3").innerHTML = "Physical Eduction";
        document.getElementById("num1").innerHTML =
            Math.floor(Math.random() * 21);
        document.getElementById("num2").innerHTML =
            Math.floor(Math.random() * 21);
        document.getElementById("num3").innerHTML =
            Math.floor(Math.random() * 21);


        var num1 = document.getElementById("num1").innerHTML * 1;
        var class1 = document.getElementById("class1").innerHTML;
        var num2 = document.getElementById("num2").innerHTML * 1;
        var class2 = document.getElementById("class2").innerHTML;
        var num3 = document.getElementById("num3").innerHTML *1;
        var class3 = document.getElementById("class3").innerHTML;
        if (num1 > num2 && num1 > num3) {
            document.getElementById("result").innerHTML = class1   " is the largest number.";
        }
        else if (num2 > num1 && num2 > num3) {
            document.getElementById("result").innerHTML = class2   " is the largest number.";
        }
        else if (num3 > num1 && num3 > num2){
            document.getElementById("result").innerHTML = class3   " is the largest number.";
        }

    </script>

</body>

</html>