Problèmes de conversion d'une valeur NaN en Javascript

Je commençais juste à apprendre Javascript et l'un de mes premiers projets est de construire un site qui récupère les valeurs d'une boîte de saisie et les utilise pour obtenir l'aire d'un cercle à la suiteProblèmes de conversion d'une valeur NaN en Javascript

Mon code ressemble à ceci:

let circle = document.getElementById("rCircle"); 
let radius = circle.value; 
const calcAreaCircle = (radius) => { 
    let circleResult = Math.PI * Math.pow(radius, 2); 
    circleArea.innerHTML = ("The area is: " + circleResult) 
};

informations complémentaires - Je vous ai déjà essayé de convertir NAN en utilisant parseInt comme let radius = parseInt(circle.value). Aussi je continue à obtenir NaN dans la console à moins que le code soit enveloppé dans une fonction window.onload.

Est-ce que quelqu'un sait ce qui me manque?

* Modifier

Cela fait partie de mon html

<div class="imageContainer"> 
    <h4>Circles</h4> 
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div> 
    <div class="text"> 
     <p>Tell me the radius</p> 
     <input type="number" name="" value="" placeholder="Raduis" id="rCircle"> 
     <button id="calcCircle">Get area</button> 
    </div> 
    <p id="circleArea"></p> 
</div>

Source

2017-05-23 Héctor Amparán

qu'est ce que le cercle et l'élément avec id rCIrcle? – Misaz

@Hector Pouvez-vous montrer votre partie HTML également –

@Misaz l'élément avec l'ID rCircle est une balise d'entrée html avec type = number et circle est la variable où j'essaie de le stocker –

function check() { 
 
    let circle = document.getElementById("rCircle"); 
 
    let circleArea = document.getElementById("circleArea"); 
 
    let radius = circle.value; 
 
    let circleResult = Math.PI * Math.pow(parseInt(radius), 2); 
 
    circleArea.innerHTML = ("The area is: " + circleResult) 
 
}

<div class="imageContainer"> 
 
    <h4>Circles</h4> 
 
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div> 
 
    <div class="text"> 
 
     <p>Tell me the radius</p> 
 
     <input type="number" name="" value="" placeholder="Raduis" id="rCircle"> 
 
     <button id="calcCircle" onclick="check()">Get area</button> 
 
    </div> 
 
    <p id="circleArea"></p> 
 
</div>

Source

2017-05-23 07:52:22

Je pense que c'est la réponse la plus proche de mon code, cela fonctionne parfaitement! merci beaucoup –

De rien. Codage heureux! :) –

Avez-vous essayé parseInt avec la deuxième PARAM "null"?

parseInt(circle.value, null);

Source

2017-05-23 07:22:50

J'ai testé votre code pour que la valeur d'entrée puisse entrer dans la fonction. J'ai modifié le code et fonctionne bien pour moi. Vous pouvez également utiliser le type d'entrée numérique pour éviter l'analyse syntaxique. En cas de numéro de chaîne, le javascript le convertira automatiquement en numéro. Vous pouvez vérifier cela en supprimant l'analyse syntaxique.

<!Doctype HTML> 
<html> 
<body> 
Enter Value: <input type="number" id='rCircle'>&nbsp 
<button onclick="calcAreaCircle()">Calculate</button> 
<br/> 
<br/> 
<span id="circleArea"></span> 
<script>  
    var calcAreaCircle = function(){ 
     var circle = document.getElementById("rCircle"), 
     circleArea = document.getElementById("circleArea"); 
     radius = parseInt(circle.value,10); 

     console.log(parseInt(circle.value,10)); 
     console.log(typeof radius+": "+radius); 

     var circleResult = Math.PI * Math.pow(radius, 2); 
     circleArea.innerHTML = ("The area is: " + circleResult) 
    }; 
</script> 
</body> 
</html>

Source

2017-05-23 07:39:12

Oui cela fonctionne parfaitement! Merci –

Merci. Vous pouvez sélectionner ma réponse comme correcte! –

Je l'ai fait mais ce n'est pas rafraîchissant parce que mon compte si nouveau –

Assurez-vous, vous obtenez la valeur correcte de l'entrée avec id="rCircle"

Source

2017-05-23 07:42:29 wld

Comme vous avez dit que votre code fonctionne bien après avoir enveloppé dans window.onload cela signifie que dans le cas normal Le chargement DOM n'est pas terminé avant d'avoir appelé document.getElementById("rCircle").

Il est important que vous liez votre code JS. Vous pouvez vérifier la partie de chargement DOM de votre zone de saisie par ceci: -

if(document.getElementById("rCircle").length > 0) 
{ 
    // Your JS Code like as 
    // let circle = document.getElementById("rCircle"); 
    // let radius = circle.value; 
    // etc 
} 
else 
{ 
    // DOM is not loaded , ouu need to wait for DOM loading completion 
}

ou vous pouvez appeler la fonction manuellement et en cas Thac votre DOM sera terminé avec le chargement -

Code HTML

<div class="imageContainer"> 
    <h4>Circles</h4> 
    <div class="Figures"><img src="assets/circle-shape-outline.png" alt="Circle image"></div> 
    <div class="text"> 
     <p>Tell me the radius</p> 
     <input type="number" name="" value="" placeholder="Raduis" id="rCircle"> 
     <button id="calcCircle" onClick="getArea()">Get area</button> 
    </div> 
    <p id="circleArea"></p> 
</div>

code JS

<script>  
    function getArea(){ 
     var circle = document.getElementById("rCircle"), 
     circleArea = document.getElementById("circleArea"); 
     radius = parseInt(circle.value); 
     var circleResult = Math.PI * Math.pow(radius, 2); 
     circleArea.innerHTML = ("The area is: " + circleResult) 
    }; 
</script>

Source

2017-05-23 08:02:35

Hey c'est une façon assez intelligente de vérifier le chargement du DOM. Votre code fonctionne parfaitement sur un codepen mais pour une raison quelconque, je ne peux pas le faire fonctionner avec le mien. Je pense que je vais devoir le réécrire ... Vaut-il mieux avoir le JS dans le html ou dans un autre document ?? –

Vous pouvez écrire JS dans un fichier JS et l'ajouter à l'aide d'une balise de script. Avez-vous besoin de plus d'aide de mon côté? –

J'apprécie vraiment votre aide deepak mais ne vous inquiétez pas :) merci –

Problèmes de conversion d'une valeur NaN en Javascript

Répondre

Questions connexes