Basic JavaScript how to call a function from the HTML page
Question
I have just started JavaScript basics and I'm struggling with this: HTML page has the following:
<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 . The HTML page loads the code, so I can refer to the page with the document keyword. My js code is following:
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 answers
solution1
1 2021-10-12 09:05:17
The problem is with your function itself.
Keep in mind that .value is used with an input element. So you can use .innerHTML or .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>
solution2
0 2021-10-12 08:55:18
Instead of .value use .innerHTML , and you are missing sign + after "is"
solution3
0 2021-10-12 09:16:03
You need to get textContent, and make some changes in your 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>
solution4
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
Be sure you cast every time your vars into the right type before do math ( parseInt , parseFloat etc)
And because you are new on JS please deal with JS Security - it is very important for your future dev..
https://snyk.io/learn/javascript-security/ https://glebbahmutov.com/blog/disable-inline-javascript-for-security/
solution5
-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. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.