入力フィールドに数値を入力して数学と組み合わせるときにNaNが得られるのはなぜですか？

Question

すべての辺の音量と長さを計算したいのですが、プロンプトに数値を入力するとNaNが得られます。なぜそれは働いていないのですか？

var length = document.getElementById("length"); 
 
var answer = document.getElementById("answer"); 
 
var sides = document.getElementById("sides"); 
 

 

 
var side = prompt("Enter the length/height/width of your cube", 2); 
 

 

 

 
length.innerText = side; 
 

 

 
var volume = Math.pow(side,3); 
 
var sidesmax = length*12; 
 
answer.innerText = volume; 
 
answer.innerText = sidesmax;

<p> 
 
One side of your cube has a measurement of <span id="length">___</span> units. 
 
</p> 
 
<p> 
 
Your cube has a volume of <span id="answer">___</span> units cubed. 
 
</p> 
 
<p> 
 
Your cube has max side length of <span id="answer">___</span>. 
 
</p>

Answer 1

だから間違いがあります。

この行は：

var sidesmax = length*12; 

はこのようになります。2つのスパンのための

answer.innerText = volume; 
answer.innerText = sidesmax; 

使用異なるID：

var sidesmax = side * 12; 

これらの行の両方に同じ要素を使用し、answerと呼ばれますそれらの変数を別々にします。小さな整数のべき乗の場合

どちらかが仕事でしょうが、むしろMath.powを使用するよりも*を使用するのが一般的である：

var volume = side * side * side; 

も注意変数sideが文字列ではなく、番号が含まれていること。 *またはMath.powの操作では、自動型強制で変換されますが、+などの他の演算子を使用しようとすると文字列として扱われるため、これは問題ではありません。

var length = document.getElementById("length"); 
 
var sidesAnswer = document.getElementById("sidesAnswer"); 
 
var volumeAnswer = document.getElementById("volumeAnswer"); 
 
var sides = document.getElementById("sides"); 
 

 
var side = prompt("Enter the length/height/width of your cube", 2); 
 

 
length.innerText = side; 
 

 
var volume = side * side * side; 
 
var sidesmax = side * 12; 
 
volumeAnswer.innerText = volume; 
 
sidesAnswer.innerText = sidesmax;

<p> 
 
One side of your cube has a measurement of <span id="length">___</span> units. 
 
</p> 
 
<p> 
 
Your cube has a volume of <span id="volumeAnswer">___</span> units cubed. 
 
</p> 
 
<p> 
 
Your cube has max side length of <span id="sidesAnswer">___</span>. 
 
</p>

Answer 2

あなたは文字列（__）に12を乗じているvar sidesmax = parseInt(length)*12;問題は、この行です。あなたのファイルを削除することによって、コードはうまくいきます。

var length = document.getElementById("length"); 
var answer = document.getElementById("answer"); 
var sides = document.getElementById("sides"); 


var side = prompt("Enter the length/height/width of your cube", 2); 



length.innerText = side; 

console.log(side); 
var volume = Math.pow(side,3); 

// var sidesmax = parseInt(length)*12; // multiplying string with 1 
answer.innerText = volume; 
answer.innerText = sidesmax; 

Answer 3

var length = document.getElementById("length"); 
 
var answer = document.getElementById("answer"); 
 
var sides = document.getElementById("sides"); 
 

 

 
var side = prompt("Enter the length/height/width of your cube", 2); 
 

 

 

 
length.innerText = side; 
 

 

 
var volume = Math.pow(side,3); 
 
var sidesmax = length*12; 
 
answer.innerText = volume; 
 
answer.innerText = sidesmax;

<p> 
 
One side of your cube has a measurement of <span id="length">___</span> units. 
 
</p> 
 
<p> 
 
Your cube has a volume of <span id="answer">___</span> units cubed. 
 
</p> 
 
<p> 
 
Your cube has max side length of <span id="answer">___</span>. 
 
</p>