Actualiser une fonction en cliquant sur un bouton
Résolu
Caetera
Messages postés
234
Date d'inscription
Statut
Membre
Dernière intervention
-
Caetera Messages postés 234 Date d'inscription Statut Membre Dernière intervention -
Caetera Messages postés 234 Date d'inscription Statut Membre Dernière intervention -
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):
(JS)
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)
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)
3 réponses
-
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 codevar 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 undocument.getElementById('div1').innerHTML = result;
-
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 ? -
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; }
