CODEWITHSUNDEEP
javascriptcssbackground
Julia
Julia

Reputation: 558

How can I change a button background with javascript?

I have a button having the following CSS background rule applied:

background-image:url('/images/button_1_normal.png');

I would like to change the button's background with JavaScript. I tried the following but it didn't work.

document.getElementById(step2).style.backgroundImage = "url('images/button_1_active.png') no-repeat";

What is the problem? Thank you

Upvotes: 2

Views: 8478

Answers (5)

Sundaram Seth
Sundaram Seth

Reputation: 391

Try this:

document.getElementById("step2").style = 'background-image: none; background-color:#3d8ed4;';

Upvotes: 0

Xarber
Xarber

Reputation: 25

You set the element id to a variable, add quotes to fix the problem:

document.getElementById('step2').style.backgroundImage = "url('images/button_1_active.png') no-repeat";

JS takes only strings inside quotes as text input.

Upvotes: 0

Ishara Amarasekera
Ishara Amarasekera

Reputation: 1449

Check this out. This is a working sample code. Check your image path. My images folder is in the same level as my javascript file. 

const actionButton = document.getElementById('action');
actionButton.style.backgroundImage = "url('./images/icon_playback.png')";
<button id="action"></button>

Upvotes: 0

Kevin Boucher
Kevin Boucher

Reputation: 16675

no-repeat is invalid. Only the URL part is a valid value for the background image property.

Either remove that or change your assignment to background:

document.getElementById(step2)
    .style.background="url('images/button_1_active.png') no-repeat";

Upvotes: 5

Xotic750
Xotic750

Reputation: 23482

I think you are wanting something like this. The first image, set by css, is repeated, as no other order is given. But when changed using javascript, you also want "no-repeat"

CSS

#button {
    background-image: url('http://imageshack.us/a/img856/3817/ticklf.png');
}

HTML

<button id="button">Button</div>

Javascript

setTimeout(function () {
    var button = document.getElementById("button");

    button.style.backgroundImage = "url('http://imageshack.us/a/img822/1917/crossn.png')";
    button.style.backgroundRepeat = "no-repeat";
}, 2000);

On jsfiddle

Upvotes: 4

Related Questions