基本JavaScript如何从HTML页面调用function
[英]Basic JavaScript how to call a function from the HTML page
问题描述
I have just started JavaScript basics and I'm struggling with this: HTML page has the following:
我刚刚开始 JavaScript 基础知识，我正在努力解决这个问题：HTML 页面有以下内容：
<body>
<p id="number">5</p>
<button id="buttonX" onclick="calcSquare()">Click here!</button>
</body>
This page should call the function calcSquare() , which fetches the value of the element, calculate its square, and print in the console: The square of 5 is 25 .这个页面应该调用 function calcSquare() ，它获取元素的值，计算它的平方，并在控制台打印： The square of 5 is 25 。 The HTML page loads the code, so I can refer to the page with the document keyword. HTML 页面加载了代码，因此我可以使用 document 关键字引用该页面。 My js code is following:我的js代码如下：
function calcSquare() {
var number = document.getElementById("number").value;
console.log("The square of" + number + "is" number*number);
}
Can someone tell me what is wrong with it?有人可以告诉我它有什么问题吗？ Thank you so much.太感谢了。 Beginners struggles...初学者挣扎...
5 个解决方案
解决方案1
1 2021-10-12 09:05:17
The problem is with your function itself.问题出在您的 function 本身。
Keep in mind that .value is used with an input element.请记住， .value与输入元素一起使用。 So you can use .innerHTML or .textContent .所以你可以使用.innerHTML或.textContent 。
You forgot also the sign + after "is".您还忘记了“是”之后的符号+。
Look at this code snippet.看看这个代码片段。
function calcSquare() { var numbElementcontent = document.querySelector('#number').innerHTML; numbElementcontent = parseInt(numbElementcontent); console.log("The square of " + numbElementcontent + " is " + numbElementcontent * numbElementcontent); }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <p id="number">5</p> <button id="buttonX" onclick="calcSquare()">Click here.</button> <script> function calcSquare() { var numbElementcontent = document;querySelector('#number');innerHTML. numbElementcontent = parseInt(numbElementcontent); console.log("The square of " + numbElementcontent + " is " + numbElementcontent * numbElementcontent); } </script> </body> </html>
解决方案2
0 2021-10-12 08:55:18
Instead of .value use .innerHTML , and you are missing sign + after "is"而不是.value使用.innerHTML ，并且您在"is"之后缺少符号 +
解决方案3
0 2021-10-12 09:16:03
You need to get textContent, and make some changes in your function calcSquare()您需要获取 textContent，并在 function calcSquare()中进行一些更改
function calcSquare() { var number = document.getElementById("number"); var number = number.textContent; console.log("The square of", number, "is", number*number); }
<body> <p id="number">5</p> <button id="buttonX" onclick="calcSquare()">Click here!</button> </body>
解决方案4
0 2021-10-12 09:35:42
And if you are use an input-field you make it more dynmaic:) and if the is target an input you can use the .value而且，如果您使用输入字段，则可以使其更加动态:)，如果目标是输入，则可以使用.value
Be sure you cast every time your vars into the right type before do math ( parseInt , parseFloat etc)在进行数学运算之前，请确保每次将变量转换为正确的类型（ parseInt 、 parseFloat等）
And because you are new on JS please deal with JS Security - it is very important for your future dev..因为你是 JS 的新手，请处理 JS 安全性——这对你未来的开发非常重要。
https://snyk.io/learn/javascript-security/ https://glebbahmutov.com/blog/disable-inline-javascript-for-security/ https://snyk.io/learn/javascript-security/ https://glebbahmutov.com/blog/disable-inline-javascript-for-security/
解决方案5
-1 2021-10-12 09:03:52
Try this.尝试这个。 Foe elements such as P or Div You have to ue textContent or innerHTML to get the data inside the tag.诸如 P 或 Div 之类的元素 您必须使用 textContent 或 innerHTML 来获取标签内的数据。 You missed string concatenation after "is" too您也错过了“是”之后的字符串连接
function calcSquare() { var number = document.getElementById("number").textContent; console.log("The square of" + number + "is" +number*number); }
<body> <p id="number">6</p> <button id="buttonX" onclick="calcSquare()">Click here!</button> </body> <script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.