简体   繁体   English

JavaScript无法从文本框中检索文本

[英]JavaScript not retrieving text from textbox

I am new to JS and am frustrated. 我是JS新手,感到沮丧。 Nothing I do seems to get this script to pull the text from the textboxes. 我似乎没有做任何事情来使该脚本从文本框中提取文本。 The first alert box displays the message "Hello". 第一个警报框显示消息“ Hello”。 After that, no other alert boxes display. 之后,将不显示其他警报框。 Also, the innerHTML code doesn't post any HTML to the page. 另外,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> 

Replace .getElementbyid with .getElementById (note the "B" in uppercase). .getElementbyid替换为.getElementById (注意以大写形式表示“ B”)。 Your script is breaking when reaches there with this error: Uncaught TypeError: document.getElementbyId is not a function 您的脚本在到达此位置时因以下错误而中断: 未捕获的TypeError:document.getElementbyId不是函数

JavaScript is case-sensitive. JavaScript区分大小写。

If I could offer a tip: always check console when developing JavaScript, it should be the first place to look when something goes wrong. 如果我可以提供提示:在开发JavaScript时始终检查控制台 ,那么应该是出现问题时首先查看的地方。

Working fiddle: https://jsfiddle.net/mrlew/0119L7dc/ 工作提琴: https : //jsfiddle.net/mrlew/0119L7dc/

You are using the wrong call to DOM function getElementById . 您对DOM函数getElementById使用了错误的调用。 In javascript everything is case sensitive. 在javascript中,所有内容均区分大小写。 Just be aware of that, you are using getElementbyId with the B of ById in lowerCase. 请注意,您正在使用lowerElement中带有ById的B的getElementbyId

Follow a working version: 遵循工作版本:

 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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM