Menu
Here is my project that returns the biggest value of 3 numbers. What I want to do is input 3 numbers in the three input fields I have and when I click the button Calculate I want the biggest of those three numbers to be shown after the h1. I am passing the inputs into numbers, then I am making an array of those three numbers, then I iterate through the array comparing each element with the first one. But it is not working. I really can't find the mistake in my code. Can somebody help?
Here is the html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Max Value Of Three Numbers</title>
</head>
<body>
<h1>The biggest number is: <span id="maxDisplay">0</span></h1>
<input type="number" name="" id="num1">
<input type="number" name="" id="num2">
<input type="number" name="" id="num3">
<button id="calculateMax">Calculate</button>
<script type="text/javascript" src="maxValue.js"></script>
</body>
</html>
And the JavaScript:
var maxDisplay = document.querySelector("#maxDisplay");
var number1 = document.getElementById("num1");
var num1 = Number(number1.value);
var number2 = document.getElementById("num2");
var num2 = Number(number2.value);
var number3 = document.getElementById("num3");
var num3 = Number(number3.value);
var arr = [num1, num2, num3];
var calculateMax = document.getElementById("calculateMax");
var maxNumber = 0;
calculateMax.addEventListener("click", function(){
var maxNumber = arr[0];
for (var i = 1; i < arr.length; i++)
{
if(arr[i] > maxNumber)
{
maxNumber = arr[i];
}
}
maxDisplay.textContent = maxNumber;
});
635
asked Jan 29 '26 23:01
That is because you are getting the values of input fields as soon as the script tag in your HTML file is reached (script is loaded), therefore those values are empty at that time. Move part of your code like this.
var maxDisplay = document.querySelector("#maxDisplay");
var calculateMax = document.getElementById("calculateMax");
var maxNumber = 0;
var number1 = document.getElementById("num1");
var number2 = document.getElementById("num2");
var number3 = document.getElementById("num3");
calculateMax.addEventListener("click", function(){
var num1 = Number(number1.value);
var num2 = Number(number2.value);
var num3 = Number(number3.value);
var arr = [num1, num2, num3];
var maxNumber = arr[0];
for (var i = 1; i < arr.length; i++) {
if(arr[i] > maxNumber)
maxNumber = arr[i];
}
maxDisplay.textContent = maxNumber;
});
This way, you will get those values when the button is clicked instead. And as a side note, you can get max of array without manually typing for loop like this.
maxDisplay.textContent = Math.max.apply(null, arr);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
