CODEWITHSUNDEEP
javascripthtml
user9642557
user9642557

Reputation:

How do I change the function a button's onclick attribute refers to?

Here's my 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>

My aim was that the button would switch back and forth between the two functions and text states, but all that happens is it switches the text the first time and then it doesn't do anything anymore. I was wondering how I would able to correctly change the function that the button refers to.

Upvotes: 0

Views: 186

Answers (4)

chevybow
chevybow

Reputation: 11888

Add a conditional statement. As a very naive example, you could do add a third function and do something like: 

<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()";
}

You should check the text of all elements if you will do this method- and maybe have a third conditional that console logs an error or something.

This is just one approach though- there's many ways to accomplish this- such as setting a global boolean value and checking that to determine which function to call.

Upvotes: 2

Barmar
Barmar

Reputation: 780889

If you're going to use a string of Javascript rather than a function reference, you need to set the attribute, not the property. 

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>

Upvotes: 4

Luiz Gon&#231;alves
Luiz Gon&#231;alves

Reputation: 547

Simple, set the function itself.

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

Upvotes: 5

Scath
Scath

Reputation: 3824

You can us the same comment and just check the text to switch it back and forth:

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>

Upvotes: 2

Related Questions