Pourquoi cette fonction renvoie une erreur Nan?

Question

Lorsque je clique sur "+ 1", alors dans "0" apparaît "NaN". Pourquoi ?

HTML:

<table> 
<tr><td id="run">0</td></tr> 
</table> 
<a href="#" onclick="plus();">+ 1 </a> 

JS:

function plus(){ 
document.getElementById("run").innerHTML = (document.getElementById("run").value + 1); 
} 

Answer 1

Cela arrive parce que value propriété peut être appliquée qu'à input ou select éléments.

Faites attention à ce que vous ayez besoin de convertir la valeur de votre chaîne en numérique, sinon vous obtiendrez une concaténation de chaîne. Cela peut être fait avec les fonctions parseInt ou parseFloat.

var val = parseInt(document.getElementById("run").innerHTML, 10); 
document.getElementById("run").innerHTML = (val + 1); 

Answer 2

Essayez cette

function plus(){ 
document.getElementById("run").innerHTML = parseInt(document.getElementById("run").value) + 1; 
} 

Answer 3

C'est parce que:

document.getElementById("run").value 

sera undefined et undefined + 1 == NaN.

Les boîtes de saisie ont une propriété value, mais les noeuds tels que <td /> ont .innerHTML() ou .innerText().

En outre, notez que '0' + 1 == '01', vous devez faire un peu de coulée ainsi:

parseInt(document.getElementById('run').innerHTML, 10) + 1; 

Radix supplémentaires - 10 - est nécessaire pour convertir des chaînes qui peuvent être interprétées comme des nombres octaux :)

Answer 4

Parce que les valeurs d'attribut sont toujours des chaînes et que la chaîne + 1 est un NaN en JavaScript.

Pour résoudre ce problème, utilisez string.toFloat():

function plus(){ 
    document.getElementById("run").innerHTML = (document.getElementById("run").value.toFloat() + 1); 
} 

Ou utilisez parseInt():

function plus(){ 
    document.getElementById("run").innerHTML = (parseInt(document.getElementById("run").value) + 1); 
} 

Ou utilisez la fonction ~~() comme truc, mais cela se traduira par une source non lisible.

Answer 5

Je suppose que cette question mérite une meilleure réponse, mais je peux me tromper.

Vérifions ce qui se passe dans votre fonction plus. Tout d'abord, vous obtenez un élément par son identifiant, avec

var targetElement = document.getElementById('run'); 

Il est en fait une référence à l'objet de type DOMElement. Ce qui est assez facile à voir en vérifiant sa propriété nodeType.

if (targetElement.nodeType === 1) { alert("It's an element!"); } 

DOM Les éléments ont beaucoup de belles propriétés, mais leur nodeValue est toujours égal à null.Donc, si vous voulez travailler avec son contenu textuel, vous pouvez soit rechercher les textNodes enfant - soit utiliser la propriété innerHTML. C'est une chaîne, oui, mais Javascript réussira à le convertir en un nombre normal s'il est numérique (et 0 est numérique, d'après ce dont je me souviens :).

Ainsi, votre fonction plus peut effectivement être écrit comme ça (the proof):

document.getElementById('run').innerHTML++; 

Answer 6

Parce que value est une propriété de HTMLInputElement et l'élément TD n'est pas un HTMLInputElement mais HTMLTableCellElement, donc ne pas cette propriété et:

undefined + 1; // NaN - Not a Number 

vous pouvez utiliser essentiellement la même innerHTML les biens utilisés pour se t le contenu aussi pour l'obtenir:

function plus() { 
    // no need to execute `getElementById` twice 
    var td = document.getElementById("run"); 

    td.innerHTML = +td.innerHTML + 1; 
} 

Pour convertir la valeur en nombre je le unary plus operator. Vous pouvez également vérifier si elle est NaN avant de l'utiliser, quelque chose comme:

function plus() { 
    var td = document.getElementById("run"); 
    var value = +td.innerHTML || 0; 

    td.innerHTML = value + 1; 
} 

Dans ce cas, si elle est NaN (ou 0, mais dans ce cas, il est une identité) sera mis à 0, et le nombre commencera à partir de 1 sans donner d'erreur. En outre, je dirais qu'il pourrait être mieux d'utiliser la propriété textContent où pris en charge, mais le code sera un peu plus complexe pour gérer tous les navigateurs (par exemple dans certaines versions d'IE, vous devez utiliser innerText à la place), et innerHTML pourrait être bon dans la plupart des cas.