Acabo de comenzar con los conceptos básicos de JavaScript y estoy luchando con esto: la página HTML tiene lo siguiente:
<body> <p id="number">5</p> <button id="buttonX" onclick="calcSquare()">Click here!</button> </body> Esta página debe llamar a la función calcSquare() , que obtiene el valor del elemento, calcula su cuadrado e imprime en la consola: The square of 5 is 25 . La página HTML carga el código, por lo que puedo referirme a la página con la palabra clave del documento. Mi código js es el siguiente:
function calcSquare() { var number = document.getElementById("number").value; console.log("The square of" + number + "is" number*number); }¿Alguien puede decirme qué tiene de malo? ¡Muchas gracias! Luchas de principiantes...
El problema es con su propia función.
Tenga en cuenta que .value se usa con un elemento de entrada. Entonces puede usar .innerHTML o .textContent .
También olvidaste el signo + después de "es".
Mira este fragmento de código.
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>En lugar de .value use .innerHTML , y le falta el signo + después de "is"
Necesitas obtener textContent y hacer algunos cambios en tu función 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>