Javascript/html undefined input
Question
For some reason, no matter what I do, my variables are returning undefined for this javascript assignment for homework. I wasn't getting the output i wanted so I used alert to see if I was at least getting a value, but no matter what, the value of op1 is always undefined no matter what is entered into the first operand box, and no matter which way i tried selecting the value of what was in that input box. if someone could help me out here i would appreciate that.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Multiply and Divide</title>
<style>
body {margin-left:100px;}
</style>
<script>
// code two functions multiply and divide functions here
//hints:
//when you get a value out of an input, you are getting a string. To get a number, use
//parseInt()
//When you want to output something into the HTML you can use .innerHTML - like
//document.getElementById("result").innerHTML= "fred";
var op1 = document.forms["test"]["firstoperand"].value;
var op2 = document.getElementById("secondoperand").value;
var ans = "";
function divide() {
alert(op1);
}
function multiply() {
}
</script>
</head>
<body>
<div>
<h2>JavaScript Exercise 5d </h2>
</div>
<form id="test">
<input type="text" id="firstoperand" placeholder="First Operand"/><br>
<input type="text" id="secondoperand" placeholder="Second Operand"/><br>
<input type="button" onclick="divide()" value="Divide" />
<input type="button" onclick="multiply()" value="Multiply" />
<p>The answer: <span id="result"></span></p>
</form>
</body>
</html>
2 answers
solution1
1 2020-02-18 20:18:15
I recommend putting all the script tags just before the closing </body> tag. Then when you create the variable of the form element op1 you have to do it without the value check for the value when you have the function running. I also recommend to do use document.querySelector() and document.querySelectorAll()
// this var op1 = document.querySelector("#firstoperand"); // will work exactly the same as your // var op1 = document.forms["test"]["firstoperand"]; function divide() { alert(op1.value); }
<form id="test"> <input type="text" id="firstoperand" placeholder="First Operand"/><br> <input type="button" onclick="divide()" value="Divide" /> </form> <!-- in real life you might have here more HTML elements and you will have somewhere here a closing body tag like:</body> now the trick is to add your script tags before the closing </body> so something like <script src="/path/to/some/js-file.js"></script> <script> // some javascript code here </script> </body> -->
solution2
0 2020-02-18 21:02:30
Follow the bellow code. I think this code will serve your purpose. and check the tutorial on javaScript dom
<!-- html -->
<form id="test">
<input type="text" id="firstoperand" placeholder="First Operand"/>
<input type="button"id="multiply" value="Multiply" />
</form>
<!-- js -->
document.getElementById("multiply").addEventListener("click", multiply);
function multiply() {
let firstoperand = document.getElementById('firstoperand').value;
alert(firstoperand);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.