Basic JavaScript how to call a function from the HTML page-CodePudding

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...

CodePudding user response：

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>

CodePudding user response：

Instead of .value use .innerHTML, and you are missing sign after "is"

CodePudding user response：

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>

CodePudding user response：

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/

CodePudding user response：

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>