utilisation de la propriete innerHTML dans une fonction JS

utilisation de la propriete innerHTML dans une fonction JS - HTML/CSS - Programmation

Marsh Posté le 31-08-2011 à 14:21:44    

Bonjour aux spécialistes du javascript!
Mes capacités de développement en JS étant très réduites (légèrement au-dessus du noob), je sollicite votre aide mais avec une bonne explication, sinon je n'apprendrais jamais le pourquoi de mon erreur!!!
Dans une fonction JS toute simple, j'ai besoin d'utiliser la propriété innerHTML pour écrire le résultat de la fonction dans un champ de formulaire de type texte :
Le code de la fonction :

function addNbre() {
    var Val1 = document.getElementById('nbr1').value;
    var Val2 = document.getElementById('nbr2').value;
    if(Val1 == '' || Val2 == '') {
        window.alert('Veuillez saisir 2 nombres à additionner!');
    } else {
        var Nbre1 = parseInt(Val1, 10);
        var Nbre2 = parseInt(Val2, 10);
        var Total = Nbre1+Nbre2;
        document.getElementById('Result').innerHTML = Total;
        window.alert('Le total est : ' + Total);
    }
}


Le code HTML :

<form id="FormTest" onsubmit="javascript:addNbre()">
    <p>
        Nombre 1 <input type="text" id="nbr1" name="nombre1" value="" /><br /><br />  
        Nombre 2 <input type="text" id="nbr2" name="nombre2" value="" /><br /><br />
        Résultat <input type="text" id="Result" name="resultat" value="" /><br /><br />
        <input type="submit" value="Tester" />
    </p>
</form>


Or ça ne fonctionne pas, c'est-à-dire que rien ne s'affiche dans le champ "Résultat" alors que la boîte d'alerte fonctionne (elle est là uniquement pour tester le résultat de la fonction, après je la supprime) et m'affiche bien le résultat...!
Où se situe la chose que je n'ai pas compris dans l'utilisation de innerHTML ???

Reply

Marsh Posté le 31-08-2011 à 14:21:44   

Reply

Marsh Posté le 31-08-2011 à 14:48:08    

Comme l'élément Result est un input field, le plus simple est d'utiliser .value au lieu de .innerHTML:

document.getElementById('Result').value = String(Total);

Ou bien, il faudrait définir l'élément Result comme étant un simple DIV ou SPAN :

<span id="Result"></span>


Message édité par olivthill le 31-08-2011 à 14:49:06
Reply

Marsh Posté le 31-08-2011 à 15:30:29    

Quel noob je fais! Effectivement je n'avais pas essayé le value, tellement habitué à utiliser du innerHTML avec des div ou des span !!!
Merci de ta précieuse réponse claire et précise mais j'ai un autre souci d'incompréhension, je voudrais que le formulaire conserve le résultat inscrit dans le champ et là, la page se recharge (normal vu que j'utilises un bouton submit) et donc le résultat est visible que quelques instants.
Comment puis-je procéder pour conserver le résultat dans le champ "Résultat"?

Reply

Marsh Posté le 31-08-2011 à 17:00:29    

Bon j'ai rajouté un return false dans le onclick !
Décidément plus on cherche la solution, moins on trouve l'évidence...
Merci encore à olivthill  :)  
Par contre je ne trouve pas la commande "Résolu" sur ce forum pour classer mon topic en résolu...?


Message édité par loremipsumsit le 31-08-2011 à 17:05:16
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed