带有 Math.pow 的 Js NaN 或未定义元素答案

【问题标题】：Js NaN or Undefined element with Math.pow带有 Math.pow 的 Js NaN 或未定义元素
【发布时间】：2021-06-25 16:12:10
【问题描述】：

HTML + JavaScript 初学者在这里。

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

我想要元素的编号并以 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));
  }

【问题讨论】：

@blurfus - a 是 undefined，p 元素没有 value 属性。 :-)

标签： javascript html onclick nan

【解决方案1】：

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

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

或者改用input type="text"，所以它有一个.value。

无论您使用textContent 还是value，您总会得到一个字符串。您可以依靠Math.pow 将其隐式转换为数字，但我通常认为最好有目的地转换。我的回答 here 涉及您的各种选择。

我还建议不要使用onxyz-attribute-style 事件处理程序。相反，通过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 的位置。

【讨论】：

这是一个了不起的帮助。我研究了你解释的一切，发现它很有价值。一切正常！谢谢。