Hintergrund ändert sich nicht onclick Funktion

Question

Was ist falsch mit meinem Code? Aus irgendeinem Grund ändert sich meine Funktion load() nicht .firstDiv Hintergrund?

Ich kann keine Fehler finden.

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>

Answer 1

Ihr Problem in dieser Zeile ist:

document.getElementsByClassName("firstDiv")... 

getElementsByClassName gibt ein HTMLCollection wie im doc berichtet .

Sie müssen diese Zeile ändern, mit:

document.getElementsByClassName("firstDiv")[0] 

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

Im load() Funktion müssen sie ändern, so dass es das erste Element getElementsByClassName verwendet, da sie mehrere Elemente zurückgibt.

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

Answer 3

Wenn Sie getElementByClassName verwenden, dann müssen Sie durch Angabe von Index wie [0] oder alternativ id

Beispiel mit Klassennamen verwenden Sie die Artikelnummer angeben:

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>

Für ID

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

2. JS-Code:

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