Javascript / html неопределенный ввод - PullRequest
Новая
       22

Javascript / html неопределенный ввод

0 голосов
/ 18 февраля 2020

По какой-то причине, независимо от того, что я делаю, мои переменные возвращаются неопределенными для этого javascript задания для домашней работы. Я не получил желаемый вывод, поэтому я использовал оповещение, чтобы увидеть, получаю ли я хотя бы значение, но не смотря ни на что, значение 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>

Ответы [ 2 ]

1 голос
/ 18 февраля 2020

Я рекомендую поместить все теги сценария непосредственно перед закрывающим тегом </body>. Затем, когда вы создаете переменную элемента формы op1, вы должны сделать это без проверки value значения, когда у вас запущена функция. Я также рекомендую использовать document.querySelector () и 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>

-->
0 голосов
/ 19 февраля 2020

Следуйте приведенному ниже коду. Я думаю, что этот код будет служить вашей цели. и посмотрите учебник по 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);
     }
...