J'aurai besoin d'un coup de main. J'ai un bouton qui lorsque je clique dessus, m'ouvre un code Javascript.
<li><a class="waves-effect waves-light btn" onclick="tool();"><i class="material-icons left">play_circle_outline</i>Démarrer le flux </a></li>
function tool() {
Materialize.toast('<i class="material-icons left">refresh</i> Démarrage de votre flux en cours...', 4000);
setTimeout(tool2, 3000);
}
function tool2() {
setTimeout(Materialize.toast('<i class="material-icons left">thumb_up</i> Votre flux a été démarré avec succès !', 4000));
}
Et j'aimerai que automatiquement, et sans changer de page que le bouton change pour en afficher un avec un autre texte.
It's very fast, and cross browser compatible.
People use .innerHTML because the DOM standard .textContent isn't implemented in some browsers,
especially older IE. But .innerHTML is an HTML parser, so it's a bit of a hackish way to go.
Working directly with the text node is very clean.
- Edité par christouphe 16 novembre 2017 à 11:59:26
Je viens de voir que pour un <button> .text ne marche pas (il faut donc .textContent), mais pour un <a></a> (ce qui est ton cas) le .text a l'air de suffire !
element.text ne fonctionne que si l'élément ne contient qu'un noeud de texte
element.textContent renvoie le contenu textuel de l'élément meme s'il contient plusieurs type de noeuds
C'est pas clair, donc voici un exemple :
<p>Clic sur <a href="lien.php" >ce lien</a></p>
const p = document.querySelector('p');
const a = document.querySelector('a');
p.text; // non défini
a.text; // "ce lien"
p.textContent; // "Clique sur ce lien"
a.textContent; // "ce lien"
p.text = "efface tout"; // ne fait rien (à part ajouter une nouvelle propriété à p)
a.text = "ce nouveau lien"; // change la valeur du noeud de texte
p.textContent = "efface tout"; // remplace tout le contenu par un noeud de texte "efface tout"
a.textContent = "ce nouveau lien"; // change la valeur du noeud de texte.
EDIT : effectivement, avec un bouton, ça marche pas, raison de plus pour ne pas utiliser cette propriété qui n'existait pas il y a 35 minutes
Si tu part de zéro, vaut mieux utiliser l'API fetch qui est plus simple d'utilisation que l'API XMLHttpRequest(). Le seul inconvénient et que les vieux navigateurs de la supporte pas. Un exemple :
<button>Cliquer ici pour charger du contenu</button>
<div></div>
const button = document.querySelector('button');
const div= document.querySelector('div');
button.addEventListener('click', e => { // fonction appelée au clic
button.setAttribute('disabled', '');
fetch('url.com/page.php') // lance une requête
.then(response => { // fonction appelée une fois la réponse reçue
response.text()
.then(text => { // fonction appelée une fois la réponse traitée
button.removeAttribute('disabled');
div.textContent = text;
});
});
});
D'accord, ok. Mais à quoi sert le fetch url.com/page.php ?
C'est obligatoire, d'aller récupérer dans un fichier ? Ou l'on peut l'écrire nous même dans le code ?
Edit : Après avoir cherché un petit peu. Voilà, ce que j'ai écris !
const button = document.querySelector('button');
const div= document.querySelector('div');
button.addEventListener('click', e => { // fonction appelée au clic
button.setAttribute('disabled', '');
document.write("<button disabled>Démarrage en cours...</button>");
timeout: 3000;
document.write("test");
fetch('thomas.php') // lance une requête
.then(response => { // fonction appelée une fois la réponse reçue
response.text()
.then(text => { // fonction appelée une fois la réponse traitée
button.removeAttribute('disabled');
div.innerHTML = text;
});
});
});
Pour le moment, ça fonctionne plutôt bien. Mais là, j'essaye de mettre un temps entre les document.write
- Edité par CharlesSauvat 17 novembre 2017 à 11:25:06
- Edité par CharlesSauvat 17 novembre 2017 à 19:51:21
Modifier en temps réel un bouton
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Keep It Simple Stupid - SF4 conf Swift - Cours 1/4 SF4 - Exceptions PDO - Formes Normales
Keep It Simple Stupid - SF4 conf Swift - Cours 1/4 SF4 - Exceptions PDO - Formes Normales
Keep It Simple Stupid - SF4 conf Swift - Cours 1/4 SF4 - Exceptions PDO - Formes Normales