Voici mon code:
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
document.getElementById("myButton").innerHTML = "Change that back";
document.getElementById("myButton").onclick = "changeBack()";
}
function changeBack() {
document.getElementById("myHeader").innerHTML = "Hello World!";
document.getElementById("myButton").innerHTML = "Change text";
document.getElementById("myButton").onclick = "changeText()";
}<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton" ; onclick="changeText()">Change text</button>Mon objectif était que le bouton permute entre les deux fonctions et les états de texte, mais tout ce qui se passe, c'est qu'il change le texte la première fois et qu'il ne fait plus rien. Je me demandais comment je pourrais changer correctement la fonction à laquelle le bouton fait référence.
4 réponses
Vous pouvez nous faire le même commentaire et il suffit de vérifier le texte pour le basculer d'avant en arrière:
function changeText() {
var btn = document.getElementById("myButton")
var txt = document.getElementById("myHeader")
if (txt.innerHTML == 'Hello World!') {
txt.innerHTML = "Have a nice day!";
btn.innerHTML = "Change that back";
} else {
txt.innerHTML = "Hello World!";
btn.innerHTML = "Change text";
}
}<html>
<body>
<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton" onclick="changeText()">Change text</button>
</body>
</html>Si vous allez utiliser une chaîne de Javascript plutôt qu'une référence de fonction, vous devez définir l'attribut, pas la propriété.
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
document.getElementById("myButton").innerHTML = "Change that back";
document.getElementById("myButton").setAttribute("onclick", "changeBack()");
}
function changeBack() {
document.getElementById("myHeader").innerHTML = "Hello World!";
document.getElementById("myButton").innerHTML = "Change text";
document.getElementById("myButton").setAttribute("onclick", "changeText()");
}<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton" onclick="changeText()">Change text</button>Ajoutez une instruction conditionnelle. Comme exemple très naïf, vous pourriez ajouter une troisième fonction et faire quelque chose comme:
<body>
<script src="script.js"></script>
<h1 id="myHeader">Hello World!</h1>
<button id="myButton"; onclick="determineFunction()">Change text</button>
</body>
function determineFunction() {
if(document.getElementById("myHeader").innerHTML === "Have a nice day!"){
changeText();
}
else{
changeBack();
}
}
function changeText() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
document.getElementById("myButton").innerHTML = "Change that back";
document.getElementById("myButton").onclick = "changeBack()";
}
function changeBack() {
document.getElementById("myHeader").innerHTML = "Hello World!";
document.getElementById("myButton").innerHTML = "Change text";
document.getElementById("myButton").onclick = "changeText()";
}
Vous devriez vérifier le texte de tous les éléments si vous allez faire cette méthode - et peut-être avoir un troisième conditionnel qui consignera une erreur ou quelque chose.
Cependant, ce n'est qu'une approche - il existe de nombreuses façons d'accomplir cela - comme définir une valeur booléenne globale et la vérifier pour déterminer la fonction à appeler.
Simple, définissez la fonction elle-même.
document.getElementById("myButton").onclick = changeText;
...
document.getElementById("myButton").onclick = changeBack;