Question

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。

For example

有人可以帮我吗？我不确定代码到底在哪里搞乱，因为我是编写Javascript的新手。

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

Answer 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等的实际值。在您创建字符串之前。

Answer 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)); }

Answer 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);
}

从Javascript获得NaN

4 个答案: