I apologize for the basic question but I have been trying to make this work for a long time and I just can't seem to get this code to return a value.
I am embarrassed to admit how long I have been attempting to make it work, and how many StackOverflow questions that were related that I have looked at, however, none were as simple as my code, and when I attempted to make something closer to how mine looked, it just wouldn't alert anything.
The idea is the following:
- User inputs 2 numbers,
- clicks the button,
- and is alerted the average of the numbers they input.
My alert has been NaN no matter how many iterations I have made. I could really use some advice. Thanks in advance!
<html>
<head>
<title> Javascript </title>
<body>
<p> Enter two number for an average below </p>
<p> Number 1<input type="text" id="userInput1"></input></p>
<p> Number 2<input type="text" id="userInput2"></input></p>
<button id="averageButton"> Calculate</button>
<script type="text/javascript">
function average(a, b) {
return ((a + b) /2);
}
document.getElementById("averageButton").onclick = function (){
var a = document.getElementById("userInput1").value;
var b = document.getElementById("userInput2").value;
alert(average());
}
</script>
</body>
</html>I apologize for the basic question but I have been trying to make this work for a long time and I just can't seem to get this code to return a value.
I am embarrassed to admit how long I have been attempting to make it work, and how many StackOverflow questions that were related that I have looked at, however, none were as simple as my code, and when I attempted to make something closer to how mine looked, it just wouldn't alert anything.
The idea is the following:
- User inputs 2 numbers,
- clicks the button,
- and is alerted the average of the numbers they input.
My alert has been NaN no matter how many iterations I have made. I could really use some advice. Thanks in advance!
<html>
<head>
<title> Javascript </title>
<body>
<p> Enter two number for an average below </p>
<p> Number 1<input type="text" id="userInput1"></input></p>
<p> Number 2<input type="text" id="userInput2"></input></p>
<button id="averageButton"> Calculate</button>
<script type="text/javascript">
function average(a, b) {
return ((a + b) /2);
}
document.getElementById("averageButton").onclick = function (){
var a = document.getElementById("userInput1").value;
var b = document.getElementById("userInput2").value;
alert(average());
}
</script>
</body>
</html>-
3
You need to pass the variables
aandbin order to get the desired result. Meaning,alert(average(a, b));What's happening is that the function is expecting two variables, which it then will perform some operation on - but because you don't pass the variables, it doesn't know whataandbare in the context of that function. Thus, your NaN – elPastor Commented Nov 3, 2017 at 2:48 -
1
...and to
parseIntorparseFloatthe valuese – ghybs Commented Nov 3, 2017 at 2:50
4 Answers
Reset to default 5You failed to pass the numbers a,b to your function - a simple mistake.
But since the inputs are seen as strings you also need to convert them to numbers a*1
See mented code
<html>
<head>
<title> Javascript </title>
<body>
<p> Enter two number for an average below </p>
<p> Number 1<input type="text" id="userInput1"></input></p>
<p> Number 2<input type="text" id="userInput2"></input></p>
<button id="averageButton"> Calculate</button>
<script type="text/javascript">
function average(a, b) {
// force the input as numbers *1
return ((a*1 + b*1) /2);
}
document.getElementById("averageButton").onclick = function (){
var a = document.getElementById("userInput1").value;
var b = document.getElementById("userInput2").value;
// pass the numbers to the average function!
alert(average(a,b));
}
</script>
</body>
</html>At first glance you might need to convert your input values from strings to floats and actually pass them to the average function.
You may want to change the inputs to
<input type="number"> to prevent users from adding non-numeric values.
Secondly parse your inputs as document....value returns string,
var a = parseFloat(document.getElementById("userInput1").value);
var b = parseFloat(document.getElementById("userInput2").value);
If you do just this you wouldn't have to deal into the funny business of doing a*1.
// force the input as numbers *1
return ((a*1 + b*1) /2);
This block isn't required since multiplying a string with a number returns a NaN value.
function average(a, b) {
return ((a + b) / 2);
}
document.getElementById("averageButton").onclick = function() {
var a = document.getElementById("userInput1").value;
var b = document.getElementById("userInput2").value;
alert(average());
}<p> Enter two number for an average below </p>
<p> Number 1<input type="text" id="userInput1"></input>
</p>
<p> Number 2<input type="text" id="userInput2"></input>
</p>
<button id="averageButton"> Calculate</button>