Actualiser une fonction en cliquant sur un bouton

Résolu/Fermé

Caetera Messages postés 236 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 15 novembre 2022 - Modifié le 3 juil. 2020 à 19:24
Caetera Messages postés 236 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 15 novembre 2022 - 4 juil. 2020 à 04:33

Bonjour à toutes et à tous,
J'apprends javascript, ce que je veux faire c'est créer un bouton qui permette d'afficher du texte, ici il s'agit d'une fonction qui génère un mot au hasard issu d'une liste. Jusque là c'est ok, ça fonctionne comme je veux. J'aimerais que la fonction s'actualise à chaque fois que l'on clique sur le bouton qui affiche le texte, c'est ici que je bloque.
Je sais qu'il existe location.reload() mais cette méthode actualise la page quand moi je voudrais simplement actualiser la fonction

Voici mon code (HTML puis JS):

<html>
<head>
    <script src="script.js"></script>
</head>
<body>
    <div id="div1" style="visibility: hidden">
        <script>document.write(result)</script>    
    </div>
    <div id="div2">
        <center>
            <button class="bouton" id="clique" onclick="javascript:afficher('div1')">clique</button>
        </center>
    </div>
</body> 
</html>

(JS)

function champLexHab(){
    var hasard = Math.floor(Math.random()*11);
    var listeDeMots = ['maison', 'appartement', 'porte', 'fenêtre', 'chaise', 'cheminée', 'escalier', 'cuisine', 'salle de bain', 'chambre', 'couloir'];
    return(listeDeMots[hasard])
}

var result = champLexHab();
// console.log(result);

function afficher(id){
    if(document.getElementById(id).style.visibility="hidden")
    {
        document.getElementById(id).style.visibility="visible";
    }
    else{
        document.getElementById(id).style.visibility="hidden";
    }
    return true;
}

EDIT : Ajout des balises de code

(je n'arrive pas à afficher les balises de code "access denied : you don't have permission to access" - je poste depuis mon téléphone)

A voir également:

3 réponses

Réponse 1 / 3

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
3 juil. 2020 à 19:28

Bonjour,

Pas très clair tes explications...

Mais si j'ai compris, tu voudrais que ta fonction champLaxHab se relance à chaque clique sur ton bouton ?

Dans ce cas, il te suffit de mettre ta ligne de code

var result = champLexHab();

Dans ta fonction afficher

Et au lieu d'utiliser le document.write (qu'il faut désormais éviter d'utiliser..) dans ton html ... placer dans ta fonction afficher un

document.getElementById('div1').innerHTML = result;

Réponse 2 / 3

Caetera Messages postés 236 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 15 novembre 2022 24
3 juil. 2020 à 22:46

Merci pour ta réponse,

Tu as bien compris, j'aimerais que la fonction champLexHab s'actualise à chaque fois que l'on appuie sur le bouton "clique",

J'ai ajouter var result = champLexHab(); à la fonction afficher mais ça ne change rien :/

J'ai également ajouté document.getElementById('div1').innerHTML = result; mais là ça me donne à chaque fois un résultat undefined à la fonction champLexHab

Pourquoi il ne faut plus utiliser document.write ?

Réponse 3 / 3

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
4 juil. 2020 à 00:47

function champLexHab(){
      var hasard = Math.floor(Math.random()*11);
      var listeDeMots = ['maison', 'appartement', 'porte', 'fenêtre', 'chaise', 'cheminée', 'escalier', 'cuisine', 'salle de bain', 'chambre', 'couloir'];
      return(listeDeMots[hasard])
    }

    function afficher(id){
      
      if(document.getElementById(id).style.visibility="hidden") {
        document.getElementById(id).style.visibility="visible";
        var result = champLexHab();
        console.log(result);
        document.getElementById(id).innerHTML=result;
      } else{
        document.getElementById(id).style.visibility="hidden";
      }
      
      return true;
    }

Caetera Messages postés 236 Date d'inscription mercredi 19 août 2009 Statut Membre Dernière intervention 15 novembre 2022 24
4 juil. 2020 à 04:33

Super merci beaucoup ! Ça fonctionne parfaitement :)

Discussions similaires

Où est la touche SHIFT sur mon clavier d'ordi ?

ou se trouve le bouton d'actualisation sur l'

ne pas utiliser la souris mais le clavier

ou est il ce bouton actualiser,?

quelle touche pour "actualiser"

Discussions similaires

Newsletters