Math.pow 的 Js NaN 或未定义元素

Question

HTML + JavaScript 初学者。

我正在尝试获取 ElementById，在我的例子中是一个数字。我只能实现 NaN、Undefined 或一些关于对象的奇怪文本。

我想要元素的编号 return 它的 2. 144 次方。谢谢！

<!DOCTYPE html>
<html>
    <head>
        <title>JavaScript Test</title>
        <script src="test.js"></script>
    </head>

<body>
    <p id="number">12</p>
    <button id="button1" onclick="calcSquare()">Click here!</button>
</body>

</html>

function calcSquare() {
  var a = document.getElementById('number').value;
  var b = 2;
  document.getElementById('number').innerHTML = (Math.pow(a, b));
  }

Answer 1

您的 id="numer" 元素是 p，而不是 input 或 select，因此它没有 value 属性.您可以使用其 textContent 属性，它会为您提供其内容的文本：

var a = document.getElementById('number').textContent;

或者使用 input type="text" 代替，因此它有 .value.

无论您使用 textContent 还是 value，您都会得到一个字符串。您可以依靠 Math.pow 将其隐式转换为数字，但我通常发现最好有意转换。我的回答进入了你的各种选择。

我还建议不要使用onxyz-属性样式的事件处理程序。相反，通过 addEventListener 等现代机制连接事件。这样，处理程序就不必是全局函数。

（也不需要 Math.pow(a, b) 周围的 ()。）

这是一个使用 contenteditable p 元素的示例：

document.getElementById("button1").addEventListener("click", function calcSquare() {
    const el = document.getElementById("number");
    const a = +el.textContent;
    const b = 2;
    el.textContent = Math.pow(a, b);
});

<p id="number" contenteditable>12</p>
<button id="button1">Click here!</button>

因为我使用了 const 而不是 var。在现代 JavaScript 编程中基本上没有 var 的位置。

Math.pow 的 Js NaN 或未定义元素

Js NaN or Undefined element with Math.pow

html

javascript

onclick

nan