Pourquoi ai-je reçu NaN en entrant un nombre dans un champ de saisie et en le combinant avec Math?

Question

Je veux calculer le volume et la longueur de tous les côtés, mais je reçois NaN quand je mets un nombre dans l'invite. Pourquoi ça ne marche pas?

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

Vous avez donc quelques erreurs.

Cette ligne:

var sidesmax = length*12; 

devrait être ceci:

var sidesmax = side * 12; 

Ces lignes utilisent tous deux le même élément, appelé answer:

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

Utilisez différentes ids pour les deux travées et séparer les variables pour eux.

Pour les petites puissances entières, il est courant d'utiliser * plutôt que d'utiliser Math.pow, bien que ce soit fonctionnera:

var volume = side * side * side; 

Notez également que la side variable contient une chaîne, pas un nombre. Pour les opérations impliquant * ou Math.pow cela n'aura aucune importance car la contrainte de type automatique le convertira pour vous mais si vous avez essayé d'utiliser d'autres opérateurs, tels que +, il sera traité comme une chaîne.

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

Le problème est avec cette ligne var sidesmax = parseInt(length)*12; vous multipliez 12 avec une chaîne (__). En supprimant votre fichier, le code fonctionne bien.

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>