Question regarding simple Javascript/HTML

Question

I have been teaching myself some Javascript; and I am having trouble getting this function to run properly. This is what is being output.

Answer: [object HTMLInputElement][object HTMLInputElement]

 function addNumbers() { var firstNum = document.getElementById("num1"); var secondNum = document.getElementById("num2"); result = firstNum + secondNum; document.getElementById("demo").innerHTML = "Answer: " + result; return result; }

 <!DOCTYPE html> <html> <head> <!-- ,<script src="scripts.js"></script> --> </head> <body> <h2>JavaScript Functions</h2> <p>This example calls a function which performs a calculation and returns the result:</p> <form> First Number<br> <input type="text" name="firstNum" id="num1"><br> Second Number<br> <input type="text" name="secondNum" id="num2"><br> <input type="button" value="Add!" onclick="addNumbers()"> </form> <p id="demo"></p> </body> </html>

Answer 1

Like the comments said, get the value from the HTML element node and parse it into a float

var firstNum = parseFloat(document.getElementById("num1").value);
var secondNum = parseFloat(document.getElementById("num2").value);

 function addNumbers() { var firstNum = parseFloat(document.getElementById("num1").value); var secondNum = parseFloat(document.getElementById("num2").value); result = firstNum + secondNum; document.getElementById("demo").innerHTML = "Answer: " + result; return result; }

 <!DOCTYPE html> <html> <head> <!-- ,<script src="scripts.js"></script> --> </head> <body> <h2>JavaScript Functions</h2> <p>This example calls a function which performs a calculation and returns the result:</p> <form> First Number<br> <input type="text" name="firstNum" id="num1"><br> Second Number<br> <input type="text" name="secondNum" id="num2"><br> <input type="button" value="Add!" onclick="addNumbers()"> </form> <p id="demo"></p> </body> </html>

Question regarding simple Javascript/HTML

Question

1 answers

solution1
4 ACCPTED 2019-03-11 23:30:15

Question regarding simple Javascript/HTML

Question

1 answers

solution1 4 ACCPTED 2019-03-11 23:30:15

solution1
4 ACCPTED 2019-03-11 23:30:15