Changing the Style of a HTML-Button within a JavaScript Function

Question

I am trying to change the style class of a button when clicking it but it is not working how it should.

I need the style/icon change inside a JS function because I am doing some more stuff when the buttons gets clicked.

function generate() {
//// Some stuff
  document.getElementById('btn1').class = 'play icon fa fa-stop';
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 

<div class='container20'>
  <button class='play icon fa fa-play-circle-o' type='button' onclick='generate()' id="btn1">Button</button> 
</div>

Nisharg Shah · Accepted Answer · 2019-04-19 19:16:41Z

2

class not exist, there is className, so replace it by className
In onclick there is function so, you need to add () in it so, replace generate to generate().

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<div class='container20'>
    <button class = 'play icon fa fa-play-circle-o' type = 'button' onclick = 'generate()' id = "btn1">Button</button>     
</div>                      
<div class='container80'>
    <script>            
        function generate() {
            //// Some stuff
            document.getElementById('btn1').className = 'play icon fa fa-stop';
        }
    </script>
</div>

edited Apr 19, 2019 at 19:16

answered Apr 19, 2019 at 19:10

Nisharg Shah

20k12 gold badges70 silver badges78 bronze badges

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

1 Comment

Nisharg Shah Over a year ago

glad to help you bro

Intervalia · Accepted Answer · 2019-04-19 19:07:10Z

1

Use className and not class

document.getElementById('btn1').className = 'play icon fa-stop';

answered Apr 19, 2019 at 19:07

Intervalia

11.1k2 gold badges35 silver badges71 bronze badges

Comments

Faraaz Malak · Accepted Answer · 2019-04-19 19:16:26Z

0

Try the following:

Below code will add the 3 classes to any existing classes already applied to the button

document.getElementById('btn1').classList.add('play', 'icon', 'fa-stop');

Below code will replace any existing classes already added to the button with play, icon and fa-stop

document.getElementById('btn1').className = 'play icon fa-stop';

answered Apr 19, 2019 at 19:16

Faraaz Malak

3391 silver badge6 bronze badges

Comments

Stephen P · Accepted Answer · 2019-04-19 19:37:11Z

Rather than setting className, and having to preserve the play icon parts of the className text, you can use classList to remove and add the necessary classes

function generate() {
    const b = document.getElementById('btn1')
    b.classList.remove('fa-play-circle-o`);
    b.classList.add('fa-stop');
}

Yes, it's more lines, but it's more flexible too. For example you could write a method that takes the old class and the new class and call it from anywhere.

function changeClass(element, old, new) {
    element.classList.remove(old);
    element.classList.add(new);
}

Also, since you are running in an event handler, you don't have to getElementById('btn1') because the event.target is the button that was clicked.
This (below) attaches an event handler, rather than using an inline onclick=, and I've added background color just so the effect of clicking the button can be seen.

document.getElementById('btn1')
        .addEventListener('click', function(e) {
            e.target.classList.remove('fa-play-circle-o');
            e.target.classList.add('fa-stop');
        });

button {
    font-weight: bold;
}
button.fa-play-circle-o {
    background-color: lightsalmon;
}
button.fa-stop {
    background-color: lightgreen;
}

<div class="container20">
  <button id="btn1" type="button"
          class="play icon fa-play-circle-o">Button</button> 
</div>

Collectives™ on Stack Overflow

Changing the Style of a HTML-Button within a JavaScript Function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related