Clicking on the background does not alter the onclick function

Question

Clicking on the background does not alter the onclick function

Can anyone help me troubleshoot my code? My function load() isn't changing the background of .firstDiv for some reason.

I've checked multiple times but I can't seem to spot any errors.

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>

html css onclick

Answer 1

Answer №1

The issue can be found in the following line of code:

document.getElementsByClassName("firstDiv")...

To resolve this, you should update the line to:

document.getElementsByClassName("firstDiv")[0]

Here is the corrected 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>

Answer 2

The issue can be found in the following line of code:

document.getElementsByClassName("firstDiv")...

To resolve this, you should update the line to:

document.getElementsByClassName("firstDiv")[0]

Here is the corrected 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>

Answer 3

Answer №2

When updating the load() function, ensure to modify it in a way that it utilizes the initial element retrieved by getElementsByClassName, considering that it can return various elements.

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

Answer 4

When updating the load() function, ensure to modify it in a way that it utilizes the initial element retrieved by getElementsByClassName, considering that it can return various elements.

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

Answer 5

Answer №3

If you're utilizing the getElementByClassName method, it's important to specify the item number using an index like [0], or alternatively you can use the id attribute.

Example with Class Name:

function changeBackground() {
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="changeBackground()">Change background</button>
</div>

Using ID

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

Javascript Code:

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

Answer 6

If you're utilizing the getElementByClassName method, it's important to specify the item number using an index like [0], or alternatively you can use the id attribute.

Example with Class Name:

function changeBackground() {
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="changeBackground()">Change background</button>
</div>

Using ID

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

Javascript Code:

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

Clicking on the background does not alter the onclick function

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way to verify the file extension in a multi-input form during an upload process?

Utilizing global variables in Vue.js while working with the CLI template

What causes jquery height and javascript height to both be returned as 0?

The presentation of an HTML table varies between Gmail and web browsers

Leveraging HTML5 file uploads alongside AJAX and jQuery

`<div>` element with a class of "button" that listens for

Maintaining the image's aspect ratio while cropping it to fit within the maximum or minimum height

Unlocking the potential of Vue within shadow dom environments

Turn off jQuery on certain pages while keeping the styling intact?

Is there a way for me to enable the user to easily download the HTML file?

Leveraging PHP to dynamically insert image file names into a directory for populating the HTML img src attribute in a Bootstrap

Is there a child missing? If so, add a class

Creating distinct web addresses for various sections of vue.js pagination

Where do JQuery and framesets vanish to?

Challenger arises in the realm of Chakra UI styling

Issue with Angular custom tag displaying and running a function

Javascript dynamically generates CSS animations

What's the issue with the addClass function not working as expected?

Tips for integrating CSS with Material UI TableContainer

Transfer the data from a post request through routes following the MVC pattern