Comment changer la fonction à laquelle l'attribut onclick d'un bouton fait référence?

Question

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.

javascript html

0

user9642557 13 avril 2018 à 19:16

Answer 1

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>

2

Scath 13 avril 2018 à 16:22

Answer 2

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>

4

Barmar 13 avril 2018 à 16:26

Answer 3

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.

2

chevybow 13 avril 2018 à 19:31

Answer 4

Simple, définissez la fonction elle-même.

document.getElementById("myButton").onclick = changeText;
...
document.getElementById("myButton").onclick = changeBack;

5

Luiz Gonçalves 13 avril 2018 à 16:23

Comment changer la fonction à laquelle l'attribut onclick d'un bouton fait référence?

4 réponses

Questions connexes

De nouvelles questions

javascript