Javascript/html未定义输入_Javascript_Html_Forms_Input_Undefined

Javascript/html未定义输入

javascript html forms input

Javascript/html未定义输入,javascript,html,forms,input,undefined,Javascript,Html,Forms,Input,Undefined,出于某种原因，无论我做什么，我的变量都返回未定义的javascript作业。我没有得到我想要的输出，所以我使用alert来查看我是否至少得到了一个值，但不管怎样，op1的值总是未定义的，不管在第一个操作数框中输入了什么，也不管我以何种方式尝试选择该输入框中的值。如果有人能帮我，我会很感激的 <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Multiply and

出于某种原因，无论我做什么，我的变量都返回未定义的javascript作业。我没有得到我想要的输出，所以我使用alert来查看我是否至少得到了一个值，但不管怎样，op1的值总是未定义的，不管在第一个操作数框中输入了什么，也不管我以何种方式尝试选择该输入框中的值。如果有人能帮我，我会很感激的

<!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>


乘除
正文{左边距：100px；}
//在这里对两个函数进行乘除编码
//提示：
//当你从输入中得到一个值时，你就得到了一个字符串。要获取数字，请使用
//parseInt（）
//当您想将某些内容输出到HTML中时，可以使用.innerHTML-like
//document.getElementById（“结果”）.innerHTML=“fred”；
var op1=document.forms[“test”][“firstoperand”].value；
var op2=document.getElementById（“第二个操作数”）.value；
var ans=“”；
函数除法（）{
警报（op1）；
}
函数乘法（）{
}
JavaScript练习5d




答案是：

我建议将所有脚本标记放在结束标记之前。然后，当您创建表单元素

op1

的变量时，必须在不使用

值的情况下执行该操作，并在运行函数时检查值。我也建议做使用和保养

//这个
var op1=document.querySelector（“第一个操作数”）；
//将与您的
//var op1=document.forms[“test”][“firstoperand”]；
函数除法（）{
警报（op1.值）；
}



遵循下面的代码。我想这条代码可以满足你的要求。并查看上的教程

document.getElementById（“乘法”）.addEventListener（“单击”，乘法）；
函数乘法（）{
让FirstOperator=document.getElementById（'FirstOperator'）.value；
警报（第一个操作数）；
}
您必须选择函数内部的元素，否则它将在页面加载时运行。您的脚本位于文档正文上方，因此在DOM完成加载之前对其进行评估。您有两个选项：（1）侦听DOM加载事件并运行代码，或者（2）将代码移到正文底部。将标记移到结束正文标记之前=>我不敢相信我完全错过了这一点。我要小睡一会儿。谢谢你们。祝你有一个愉快的一天。也告诉你的老师。
     <!-- 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);
     }