CODEWITHSUNDEEP
javascripthtmlcssbutton
Samuel Dressel
Samuel Dressel

Reputation: 1463

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

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>

Upvotes: 1

Views: 2620

Answers (4)

Stephen P
Stephen P

Reputation: 14800

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>

Upvotes: 0

Nisharg Shah
Nisharg Shah

Reputation: 19562

  • 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>

Upvotes: 2

Faraaz Malak
Faraaz Malak

Reputation: 329

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';

Upvotes: 0

Intervalia
Intervalia

Reputation: 10945

Use className and not class

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

Upvotes: 1

Related Questions