How to change style of a button in javascript?

Question

I have a button whose original style is display: none, and after activating a function i want to change his style to an appear using style of defined class style.

I have the pause button as follows:

<li><button className="pause_button" 
 onClick={() =>{this.props.pause_resume();}}>
</button>
</li>

and the styles

.sortButton {
    background-color: ivory;
    color: black;
    padding: 10px 25px;
    border-radius: 3px;
    margin: 5px;
    font-size: 16px;
    opacity: 1;
}

.sortButton:hover {
    background-color: dodgerblue;
    color: white;
    opacity: 1;

}

.pause_button {
    display: none;
}

I am trying to change the style of pause_button to be the style of sortButton

Here is what i tried, but unfortunately no change appears.

 const pause_button =  document.getElementsByClassName("pause_button");   
 pause_button.style = "sortButton";

In a different part of my code I'm using the same way and it does make changes to the button.

const buttons = Array.from(document.getElementsByClassName("sortButton"));
buttons.forEach(button => {
            button.style = "sortButton";
})

The last bit of code happens after I have changed the buttons style in this way.

const buttons = Array.from(document.getElementsByClassName("sortButton"));
        buttons.forEach(button => {
            if(button.innerText !== text){
                button.style.backgroundColor = 'grey'; 
                button.style.opacity= 0.2;
            }
        })

All the changes except from the pause button appearing works,

score 1 · Accepted Answer · answered Jun 06 '20 at 22:19

1

Two things: style is an object, not a string. You need to change the element's class instead. And getElementsByClassName returns a collection of elements. In your code:

const pause_button =  document.getElementsByClassName("pause_button");   
pause_button.style = "sortButton";

pause_button is an HTMLCollection. You can use Array.from() like you did in the other example, or you can iterate over it directly using for...of.

const buttons = getElementsByClassName("pause_button");
for (button of buttons) {
    button.className = "sortButton";
}

answered Jun 06 '20 at 22:19

Jimmy Affatigato

116
7

I only have one pause_button, so i changed it to use `getElementById` instead. But after reading your comment I don't understand why the second from the end code example in my post works – abramzog Jun 06 '20 at 22:24
In that example, you selected all of the buttons of class `sortButton`. Then you tried to set their style to `sortButton`. They already had the style you intended them to have. But it wouldn't do anything anyway, because you can't set style with a string. – Jimmy Affatigato Jun 06 '20 at 22:42
Also, using an underscore in one class name and camelCase in the other seems like an accident waiting to happen. – Jimmy Affatigato Jun 06 '20 at 22:43
But i have changed them prior to trying to set the style to `sortButton`, as shown in the last example code. Why does it change the `backgroundColor` and the `opacity` back to the original state? – abramzog Jun 06 '20 at 22:45
I just did a quick test. Attempting to assign *any* value to an element's `style` property erases changes and resets the element's style to its CSS-defined defaults. Typescript actually throws an error for even trying to write this because `style` is meant to be readonly. – Jimmy Affatigato Jun 06 '20 at 23:04
Thanks you for the explanation, helped me sort out some stuff – abramzog Jun 06 '20 at 23:11

score 0 · Answer 2 · answered Jun 06 '20 at 22:11

0

You have to use Element.className on the DOM Node to associate a class to a particular node. To apply the class "sortButton" you have to do the following:

 const buttons = Array.from(document.getElementsByClassName("sortButton"));
 buttons.forEach(button => { button.className = "sortButton" });

answered Jun 06 '20 at 22:11

yondu_udanta

797
1
6
13

It does work, but i want to save the class name for future use. – abramzog Jun 06 '20 at 22:16
@abramzog What do you mean? Could you give more context? – yondu_udanta Jun 06 '20 at 22:18
I wanted to use the "pause_button" class to toggle the style back and forth, but i did change it to `getElementById` and added an Id field to the button to make it work – abramzog Jun 06 '20 at 22:22
You can give it both classes `button.className = "pause_button sortButton"`. But you'll want to hide and show it with javascript instead of css in that case. – Jimmy Affatigato Jun 06 '20 at 22:22

How to change style of a button in javascript?

2 Answers2