2010-03-31 17 views
0

Je suis novice en javascript et en programmeur novice, donc cela peut être une question facile à répondre. Je voudrais boucler sur les valeurs de x nombre de champs et les ajouter pour afficher la somme dans un champ final. Je peux effectuer cette fonction si j'appelle explicitement chaque champ, mais je veux l'abstraire afin que je puisse traiter un nombre flexible de champs. Voici un exemple de code que j'ai trouvé (ça ne marche pas pour moi). Où vais-je mal?ajouter un nombre incertain de champs en utilisant javascript

<html> 
<head> 
<script type="text/javascript"> 
function startAdd(){ 
    interval = setInterval("addfields()",1); 
} 
function addfields(){ 
    a = document.addition.total.value; 
    b = getElementByTagName("sum").value; 
    for (i=0; i<=b.length; i++){ 
     a+=i; 
    } 
    return a; 
} 
function stopAdd(){ 
    clearInterval(interval); 
} 
</script> 
</head> 

<body> 

<form name="addition"> 

<input type="text" name="sum" onFocus="startAdd();" onBlur="stopAdd;"> 
+ <input type="text" name="sum" onFocus="startAdd();" onBlur="stopAdd;"> 
= <input type="text" name ="total"> 

</form> 

</body> 
</html> 

Répondre

0

Il n'y a pas de tags dans votre code nommé 'sum'. Je suggère d'utiliser un attribut de classe sur vos étiquettes d'entrée et ensuite en utilisant getElementsByTagName('input') et en vérifiant qu'ils ont la classe pertinente. jQuery simplifierait énormément cela, car vous seriez en mesure de sélectionner tous les éléments avec une certaine classe dans une seule ligne: $(".className"). Si vous ne voulez pas jQuery, this question pourrait vous intéresser.

0

J'utiliser la bibliothèque jQuery et faire un match de modèle pour obtenir tous les éléments que vous voulez ajouter, puis le mettre dans votre champ de sortie

1

Il y a deux choses mal avec votre code.

Le premier:

b = getElementByTagName("sum").value; 

Vous voulez dire probablement getElementsByTagName (notez le s supplémentaire). En outre, il n'y a aucun <sum> éléments, ce qui est un problème, car vous n'obtiendrez aucun résultat. Enfin, .value retournera la propriété value de la matrice (et parce qu'il n'en existe aucune, vous obtiendrez undefined), et non un tableau des propriétés value de chaque élément.

Pour résoudre ces problèmes, vous pouvez l'écrire comme ceci:

inputElements = getElementsByTagName('input'); 
sumValues = [ ]; 

for(i = 0; i < inputElements.length; ++i) { 
    if(inputElements[i].name == 'sum') { 
     sumValues.push(inputElements[i].value); 
    } 
} 

Ou dans jQuery:

sumValues = $('input[name=sum]').map(function() { 
    return this.value; 
}); 

Le second:

for (i=0; i<=b.length; i++){ 

b.length décrit le nombre de éléments. Avec <=, vous accédez alors à b[b.length], qui n'existe pas. Vous voulez accéder jusqu'à b[b.length - 1], donc le moyen le plus idiomatique d'écrire ceci est de réécrire la condition pour utiliser < au lieu de <=. C'est-à-dire:

for(i = 0; i < b.length; ++i) {