从 Javascript 获取 NaN答案

【问题标题】：Getting NaN as a result from Javascript从 Javascript 获取 NaN
【发布时间】：2018-05-10 06:11:01
【问题描述】：

JS代码

'use strict';

$(document).ready(function() {

});

function calculatePPI(inputWidth, inputHeight, inputDiagonal) {
  document.getElementById("outputPPI").innerHTML= 
((Math.sqrt(Math.pow('inputWidth', 2)) + (Math.pow('inputHeight', 2)))/'inputDiagonal');
}

HTML 代码

<body>

    <h2>Length Converter</h2>
    <p>The following program will convert your centimeters to inches.</p>

    <p>
        <label>Width (Pixels):</label>
        <input id="inputWidth" type="number" placeholder="Width">
        <p>
            <label>Height (Pixels):</label>
            <input id="inputHeight" type="number" placeholder="Height">
        </p>

        <p>
            <label>Diagonal (Pixels):</label>
            <input id="inputDiagonal" type="number" placeholder="Diagonal Length">
        </p>

        <button onclick="calculatePPI(document.getElementById('inputWidth', 'inputHeight', 'inputDiagonal').value)">Calculate</button>
    </p>

    <p>PPI: <span id="outputPPI"></span></p>

</body>

每当我尝试计算时，我都会得到 NaN。

谁能帮我解决这个问题？我不确定代码到底哪里出了问题，因为我是 Javascript 编码的新手。

【问题讨论】：

你对getElementById的使用不正确
您不能一次从 3 个元素中获取值，即 document.getElementById('inputWidth', 'inputHeight', 'inputDiagonal').value 不起作用。您需要分别致电getElementById 3 次。
不要使用字符串：Math.pow('inputWidth', 2)，而是需要使用实际的变量名：Math.pow(inputWidth, 2)
另外，在你的函数中，你接受了 3 个变量，但你没有使用它们。即inputWidth 是一个变量，'inputWidth' 不是那个变量，它是一个字符串。

标签： javascript html nan

【解决方案1】：

您不能像那样使用getElementById，并且在您的函数中不要在您的函数变量周围放置''。

这样使用：

'use strict';

$(document).ready(function() {

});

function calculatePPI(inputWidth, inputHeight, inputDiagonal) {

  document.getElementById("outputPPI").innerHTML= 
((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<h2>Length Converter</h2>
<p>The following program will convert your centimeters to inches.</p>

<p>
  <label>Width (Pixels):</label>
  <input id="inputWidth" type="number" placeholder="Width">
  <p><label>Height (Pixels):</label>
  <input id="inputHeight" type="number" placeholder="Height"></p>
  <p><label>Diagonal (Pixels):</label>
  <input id="inputDiagonal" type="number" placeholder="Diagonal Length"></p>

  <button onclick="calculatePPI(document.getElementById('inputWidth').value, document.getElementById('inputHeight').value, document.getElementById('inputDiagonal').value)">Calculate</button>
</p>
<p>PPI: <span id="outputPPI"></span></p>
</body>

【讨论】：

【解决方案2】：

在(Math.sqrt(Math.pow('inputWidth', 2)) + (Math.pow('inputHeight', 2)))/'inputDiagonal'); 这一行中，结果是 NaN，因为您使用字符串进行数学运算。删除 '（单引号）。

(Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);

这应该可以工作，因为现在您可以访问变量 inputWidth、inputHeight 等的实际值。在您创建字符串之前。

【讨论】：

【解决方案3】：

HTML

<h2>Length Converter</h2>
<p>The following program will convert your centimeters to inches.</p>

<p>
  <label>Width (Pixels):</label>
  <input id="inputWidth" type="number" placeholder="Width">
  <p><label>Height (Pixels):</label>
  <input id="inputHeight" type="number" placeholder="Height"></p>
  <p><label>Diagonal (Pixels):</label>
  <input id="inputDiagonal" type="number" placeholder="Diagonal Length"></p>
<p>
  <button onclick="calculatePPI();">Calculate</button>
</p>
<p>PPI: <span id="outputPPI"></span></p>

Javascript

'use strict';

$(document).ready(function() {

});
function calculatePPI() {
var inputWidth = document.getElementById('inputWidth').value;
var inputHeight = document.getElementById('inputHeight').value;
var inputDiagonal = document.getElementById('inputDiagonal').value;
var outputPPI = document.getElementById("outputPPI");
  outputPPI.innerHTML= ((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
}

注意：代码中有很多语法错误，例如 PPI 计算中的赋值和参数的函数值。您可以尝试上面的代码使用原生 javascript 和下面的代码计算 JQuery强>。

function calculatePPI() {
var inputWidth = $('#inputWidth').val();
var inputHeight = $('#inputHeight').val();
var inputDiagonal = $('#inputDiagonal').vval();
var outputPPI = $("#outputPPI");
  outputPPI.html(((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal));
}

【讨论】：

【解决方案4】：

当您没有使用有效数字进行计算时，JavaScript 返回 NaN

NaN = 不是数字

确保您的操作数是方程式中的有效数字。

你可以试试-

<button onclick="calculatePPI('inputWidth','inputHeight','inputDiagonal')">Calculate</button>

function calculatePPI(inputWidth, inputHeight, inputDiagonal) {
   inputWidth    = document.getElementById(inputWidth).value
   inputHeight   = document.getElementById(inputHeight).value
   inputDiagonal = document.getElementById(inputDiagonal).value

   inputWidth    = inputWidth ?  inputWidth  : 0;      /*Setting default value 0*/
   inputHeight   = inputHeight ? inputHeight : 0;      /*Setting default value 0*/
   inputDiagonal = inputDiagonal ? inputDiagonal : 0;  /*Setting default value 0*/
   document.getElementById("outputPPI").innerHTML = ((Math.sqrt(Math.pow(inputWidth, 2)) + (Math.pow(inputHeight, 2)))/inputDiagonal);
}

【讨论】：