2017-11-27 11 views
0

JSコードはJavascriptを

'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を取得していますから、結果としてNaNを取得します。

For example

誰もがこれで私を助けてもらえますか?私はJavascriptをコーディングするのが初めてであるため、コードがどこでうまくいけないのか分かりません。

+1

あなたは一度に3つの要素から値を取得することはできません – j08691

+0

getElementById' 'のご使用は間違っている、すなわち'のdocument.getElementById( 'inputWidth'、 'inputHeight' 、 'inputDiagonal')。valueは動作しません。 'getElementById'を3回別々に呼び出す必要があります。 – Claies

+0

文字列 'Math.pow( 'inputWidth'、2)'の代わりに実際の変数名を使用する必要があります: 'Math.pow(inputWidth、2)' – Brian

答えて

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>

0

この行では、(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、実際の値にアクセスするので、動作するはずです。

0

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の計算ではとparameters.Youのための関数値の値の代入のようなコードに構文エラーがあり、多くは、ネイティブのJavaScriptを使用してコードの上にあなたの計算を試してみて、1以下のための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)); 
} 
0

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