CODEWITHSUNDEEP
htmlcssonclick
Valdas S
Valdas S

Reputation: 455

Background does not change onclick function

what's wrong with my code? For some reason my function load() does not change .firstDiv background?

I can't find any mistakes.

function load() {
document.getElementsByClassName("firstDiv").style.backgroundImage = "url('https://static.pexels.com/photos/140945/pexels-photo-140945.jpeg')";
}
.firstDiv, .secondDiv {
  width: 50%;
  height:100vh;
  float: left;
}

.firstDiv {
  background-image: url("https://static.pexels.com/photos/200303/pexels-photo-200303.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
  }
<div class="firstDiv"></div>

<div class="secondDiv">
  <button onclick="load()">Change background</button>
</div>

Upvotes: 0

Views: 28

Answers (3)

gaetanoM
gaetanoM

Reputation: 42054

Your issue is in this line:

document.getElementsByClassName("firstDiv")...

getElementsByClassName returns an HTMLCollection like reported in the doc.

You need to change that line with:

document.getElementsByClassName("firstDiv")[0]

The snippet:

function load() {
  document.getElementsByClassName('firstDiv')[0].style.backgroundImage
 = "url('https://static.pexels.com/photos/140945/pexels-photo-140945.jpeg')";
}
.firstDiv, .secondDiv {
    width: 50%;
    height:100vh;
    float: left;
}

.firstDiv {
    background-image: url("https://static.pexels.com/photos/200303/pexels-photo-200303.jpeg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
}
<div class="firstDiv"></div>
<div class="firstDiv"></div>

<div class="secondDiv">
    <button onclick="load()">Change background</button>
</div>

Upvotes: 1

Atlas_Gondal
Atlas_Gondal

Reputation: 2552

If you are using getElementByClassName then you need to specify the item number by specifying index like [0] OR alternatively use id

Example with Class Name: 

function load() {
document.getElementsByClassName("firstDiv")[0].style.backgroundImage = "url('https://static.pexels.com/photos/140945/pexels-photo-140945.jpeg')";
}
.firstDiv, .secondDiv {
  width: 50%;
  height:100vh;
  float: left;
}

.firstDiv {
  background-image: url("https://static.pexels.com/photos/200303/pexels-photo-200303.jpeg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
  }
<div class="firstDiv"></div>

<div class="secondDiv">
  <button onclick="load()">Change background</button>
</div>

For ID

  1. Assign ID e.g <div id="firstDiv"></div>

  2. JS Code:

    document.getElementById("firstDiv").style.backgroundImage = "url('https://static.pexels.com/photos/140945/pexels-photo-140945.jpeg')";

Upvotes: 1

spencer.sm
spencer.sm

Reputation: 20614

In the load() function, need to change it so that it uses the first element of getElementsByClassName since it returns multiple elements.

document.getElementsByClassName("firstDiv")[0]...

Upvotes: 1

Related Questions