Question

我是JS的新手并且很沮丧。我没做什么似乎让这个脚本从文本框中提取文本。第一个警告框显示消息“Hello”。之后，不会显示其他警告框。此外，innerHTML代码不会向页面发布任何HTML。

<!DOCTYPE html>
<html>

  <body>


    <form>

      Number 1:
      <input type="text" value=" "  id="number1"></input> 
    <br />
    Number 2:
    <input type="text" value=" "  id="number2"></input>
  <br />
  <input type="button" onclick="calculate()" value="Calculate"></input>
<p id="product"></p>
</form>



<script>
  function calculate() {
    alert("Hello");
    var num1, num2;
    num1 = Number(document.getElementbyId("number1").value);
    alert(num1);
    num2 = Number(document.getElementbyId("number2").value);

    var prod = num1 * num2;
    alert(prod);
    document.getElementbyId("product").innerHTML=prod;
  }
</script>


</body>


</html>

Answer 1

将.getElementbyid替换为.getElementById（注意＆＃34; B＆＃34;大写）。当到达那里时你的脚本出现了这个错误： Uncaught TypeError：document.getElementbyId不是函数

JavaScript区分大小写。

如果我可以提供提示：在开发JavaScript时始终检查控制台，它应该是出现问题时首先要查看的内容。

工作小提琴：https://jsfiddle.net/mrlew/0119L7dc/

Answer 2

您正在使用错误的DOM函数调用getElementById。在javascript中，一切都区分大小写。请注意，您在lowerCase中使用getElementbyId和ById的B。

遵循工作版本：

function calculate() {
  alert("Hello");
  var num1, num2;
  num1 = Number(document.getElementById("number1").value);
  alert(num1);
  num2 = Number(document.getElementById("number2").value);

  var prod = num1 * num2;
  alert(prod);
  debugger;
  document.getElementById("product").innerHTML=prod;
}

<!DOCTYPE html>
<html>
  <body>
    <form>
      Number 1:
      <input type="text" value=" "  id="number1"></input> 
    <br />
    Number 2:
    <input type="text" value=" "  id="number2"></input>
  <br />
  <input type="button" onclick="calculate()" value="Calculate"></input>
<p id="product"></p>
</form>
</body>
</html>

JavaScript不从文本框中检索文本

2 个答案: