Adding multiple style in Javascript function not working

Question

I have a javascript function to change a button style when a button click.

HTML

<button id="pause" class="pause" onclick="event_click_startpause(this);">Pause</button>

Javascript

window.event_click_startpause = function(btn) {
    if (interval === null) {
        start();
        btn.innerText = 'pause';
        btn.style.backgroundColor = "#c1580b";
        btn.style.box-shadow= "0px 0px 0px 3px #173B0B"
    }
}

Here I want to add another style for the button. For that I added this also

btn.style.box-shadow= "0px 0px 0px 3px #173B0B"

Isn't it possible to add multiple styles in this function? So how can I fix this.

Answer 1

function event_click_startpause(btn) {
  interval = null;
  if (interval === null) {
    // start();
    btn.innerText = 'pause';
    btn.style.backgroundColor = "#c1580b";
    btn.style.boxShadow = "0px 0px 0px 3px #173B0B"
  }
}

<button id="pause" class="pause" onclick="event_click_startpause(this);">Pause</button>

Working Fine!

Answer 2

You can add as many styles as possible but the names of styles are in camelCase not the kebab-case as you are using right now for box-shadow.

Therefore you have two options, either use btn.style.boxShadow = "0px 0px 0px 3px #173B0B"

Or if you want to use kebab-case you can use style.cssText like this:

btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B";

Note that you can specify multiple css rules at the same time using the technique mentioned above therefore you can do this:

btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #c1580b";