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>

you have to do the selction of elements inside of the function - otherwise its going to run when the page loads. — Daniel A. White, Feb 18 '20 at 20:12
Your script is above the document body, so it is evaluated before the DOM has finished loading. You have two options: (1) listen for the DOM loaded event and run your code then, or (2) move your code to the bottom of the body. — , Feb 18 '20 at 20:12
i cant believe i totally missed that. I am going to take a nap. Thank you guys. have a good day. — moto, Feb 18 '20 at 20:17
Also tell your teacher to [stop teaching self-terminated tag syntax](https://stackoverflow.com/questions/46939538/difference-between-script-src-foo-js-script-and-script-src-foo-js/46939597#46939597). — Scott Marcus, Feb 18 '20 at 20:19
@imconfused Indeed, `input` tags are not closed in HTML5 (which you are using). In fact, in HTML5 they *must not* be closed. They *must* be closed in XHTML. — , Feb 18 '20 at 20:59
@Amy `input` tags have never had closing tags (HTML5 doesn't change that). HTML5 does allow for self-terminating tags in the sense that the `\\` symbol at the end of an opening tag will just be ignored by the browser. I am simply strongly recommending that they not be used as they only confuse users. — Scott Marcus, Feb 18 '20 at 21:07
@ScottMarcus XHTML requires them to be self-closed to meet XML specs. Regarding HTML5, I didn't say "closing tags" anywhere in my comment. — , Feb 18 '20 at 21:29
@Amy Yes, I know and didn't say otherwise (`input` is an HTML tag). I was commenting about HTML. — Scott Marcus, Feb 18 '20 at 21:34
@ScottMarcus Okay, then I'm confused. Did you misread my comment? I do not understand the implied correction in your comment. We seem to be in agreement. — , Feb 18 '20 at 21:34
@Amy It was simply that you said that `input` tags are not closed in HTML5. They have never been closed in any version of HTML. Also, technically, you *can* self-terminate them in an HTML5 document and the browser will simply ignore `\\` character. My original point to the OP wasn't really about specs., it was about best-practices. — Scott Marcus, Feb 18 '20 at 21:58
@ScottMarcus Oh, I see now. Yeah my comment could have been more generic re: HTML5->HTML. — , Feb 18 '20 at 22:00

caramba · Answer 1 · 2020-02-18T20:25:31.710

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>

-->

score 0 · Answer 2 · answered Feb 18 '20 at 21:02

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);
     }

Javascript/html undefined input

2 Answers2