Changing html button with javascript

Question

Been trying to crack this for days and I think I've got tunnel vision that can't see past my mistake!

I have an HTML button which when calling a javascript method and passing it true or false I want the button class to change as well as the innerHTML. Currently, I can only get the class to change. See the code below:

var buttonHandler = function () {
  toggleButton(false);
  getRecords();
};

var btn = document.getElementById("get-records");
btn.addEventListener("click", buttonHandler);

JS:

function toggleButton (loaded) {
   btn.innerHTML = loaded ? "Get next" : "Loading...";
   btn.classList.toggle("button-not-loading");
   btn.classList.toggle("button-loading");
}

HTML (The button looks like this):

<button id="get-records" class="button-not-loading">Get next</button>

CSS: .button-loading { background-color:dodgerblue; color:white }

.button-not-loading { 
   background-color:lawngreen; 
   color:white 
}

t1m0n · Accepted Answer · 2016-05-01 08:49:37Z

1

You always pass false to your toggleButton function, thats why html is changed only once. You should change true/false also, just add variable which will hold this value:

var loading = true;

var buttonHandler = function () {
  loading = !loading;
  toggleButton(loading);
  getRecords();
};


var btn = document.getElementById("get-records");
btn.addEventListener("click", buttonHandler);

function toggleButton (loaded) {
   btn.innerHTML = loaded ? "Get next" : "Loading...";
   btn.classList.toggle("button-not-loading");
   btn.classList.toggle("button-loading");
}

.button-loading { background-color:dodgerblue; color:white }
.button-not-loading { background-color:lawngreen; color:white }

<button id="get-records" class="button-not-loading">Get next</button>

answered May 1, 2016 at 8:49

t1m0n

3,4411 gold badge20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Narxx Over a year ago

Good answer! In practice, of course, make sure you name the global variables in a way that make sense. 'loading' is a very generic name that could conflict with other toggle buttons.

nayeri · Accepted Answer · 2016-05-01 08:53:25Z

1

Instead of toggleButton(false);
Use this toggleButton(this.classList.contains('button-not-loading') ? false : true);

answered May 1, 2016 at 8:53

nayeri

1751 silver badge7 bronze badges

1 Comment

Sarath Chandra Over a year ago

I personally like this solution over the use of a global variable.

Collectives™ on Stack Overflow

Changing html button with javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related