Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
889 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  utilisation de la propriete innerHTML dans une fonction JS

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

utilisation de la propriete innerHTML dans une fonction JS

n°2098750
loremipsum​sit
Posté le 31-08-2011 à 14:21:44  profilanswer
 

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 ???

mood
Publicité
Posté le 31-08-2011 à 14:21:44  profilanswer
 

n°2098763
olivthill
Posté le 31-08-2011 à 14:48:08  profilanswer
 

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
n°2098781
loremipsum​sit
Posté le 31-08-2011 à 15:30:29  profilanswer
 

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"?

n°2098812
loremipsum​sit
Posté le 31-08-2011 à 17:00:29  profilanswer
 

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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  utilisation de la propriete innerHTML dans une fonction JS

 

Sujets relatifs
fonction exec ou shell_exec lancer depuis un navigateurrecherche fonction javasript
[JS] Portée d'une variable, comprends pas[C] : Problème avec la fonction system
Problème de l'utilisation de Scanner ( dans java )Execution fonction stockée dans table SQL
[Qt] Utilisation de telnet dans une application[Résolu] Limiter des options en fonction de choix antérieurs ?
Planification d'une fonction PHPComment lancer une fonction dans une fonction JS?
Plus de sujets relatifs à : utilisation de la propriete innerHTML dans une fonction JS


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR