Javascript: Average of 2 user input values

Question

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>

You need to pass the variables a and b in 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 what a and b are in the context of that function. Thus, your NaN — elPastor
– elPastor, Commented Nov 3, 2017 at 2:48

MartinWebb · Accepted Answer · 2017-11-03 02:51:36Z

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

Mark Cooper · Accepted Answer · 2017-11-03 02:50:58Z

0

At first glance you might need to convert your input values from strings to floats and actually pass them to the average function.

answered Nov 3, 2017 at 2:50

Mark Cooper

4063 silver badges14 bronze badges

Comments

Shailendra Pal · Accepted Answer · 2017-11-03 03:55:47Z

0

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.

answered Nov 3, 2017 at 3:55

Shailendra Pal

1231 silver badge6 bronze badges

Comments

Lee Taylor · Accepted Answer · 2022-06-16 23:34:37Z

0

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>

edited Jun 16, 2022 at 23:34

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jun 16, 2022 at 13:10

Selo Public

1

2 Comments

Lee Taylor Over a year ago

You need to parseInt the strings before using them as numbers.

Ethan Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Javascript: Average of 2 user input values

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related