Veränderungselement Stil in Array Thorugh Javascript geklickt

Question

meine HTML-Code

<div class="mydiv" onclick="clickonelement()">div1</div> 
<div class="mydiv" onclick="clickonelement()">div2</div> 
<div class="mydiv" onclick="clickonelement()">div3</div> 
<div class="mydiv" onclick="clickonelement()">div4</div> 
<div class="mydiv" onclick="clickonelement()">div5</div> 
<div class="mydiv" onclick="clickonelement()">div6</div> 
<!-- javascript code --> 
function clickonelement(){ 
mydiv = document.getElementsByClassName("mydiv"); 
for(i=0; i<mydiv.length; i++){ 
mydiv.item(i).style.backgroundColor = "red"; 
mydiv[this].style.backgroundColor = "#fff"; 
} 
} 
css code 
.mydiv{width:300px; height:30px;} 

ich will auf onClick Ereignis geklickt Element der Hintergrund weiß und andere Elemente Hintergrund rot, aber mein Code mydiv in Farbe bleiben ändern [dies]. style.backgroundColor = "#fff"; funktioniert nicht. Bitte lösen Sie dieses Problem nur in JavaScript. Ich bin in der Grundstufe von JavaScript.

Answer 1

Sie müssen eine Referenz an das Element übergeben, auf das Sie sich beziehen möchten, mit this, z. onclick="clickonelement(this)":

function clickonelement(elem) { 
 
    mydiv = document.getElementsByClassName("mydiv"); 
 
    for (i = 0; i < mydiv.length; i++) { 
 
    mydiv.item(i).style.backgroundColor = "red"; 
 
    elem.style.backgroundColor = "#fff"; 
 
    } 
 
}

<div class="mydiv" onclick="clickonelement(this)">div1</div> 
 
<div class="mydiv" onclick="clickonelement(this)">div2</div> 
 
<div class="mydiv" onclick="clickonelement(this)">div3</div> 
 
<div class="mydiv" onclick="clickonelement(this)">div4</div> 
 
<div class="mydiv" onclick="clickonelement(this)">div5</div> 
 
<div class="mydiv" onclick="clickonelement(this)">div6</div>

Answer 2

Dieser JS-Code für Ihre HTML-Code ist, müssen Sie addEventListener hinzufügen.

function clickonelement() { 
    mydiv = document.getElementsByClassName("mydiv"); 

    for (var i = 0; i < mydiv.length; i++) { 
    mydiv[i].addEventListener('click', function() { 
     this.style.backgroundColor = "red"; 
     this.style.backgroundColor = "#fff"; 
    }); 
    } 
} 

Answer 3

Hier ist nur ein weiterer Weg, die gleiche Funktionalität zu erreichen.

Ziel

1. Um Inline-Event-Handler
2. Verwenden Schleife zu entfernen nur einmal statt über alle angepassten Klassennamen Looping (mydiv) auf jedem Klick.

Gebrauchen Javascript-Funktionen & Konzepte

1. querySelectorAll: - verwendet, um alle angepassten Elemente mit gleicher Klasse auszuwählen, die mydiv ist. Es wird eine Nodelliste zurückgeben, die alle übereinstimmenden Elemente enthält.

2. forEach: - ist eine Array-Methode, die verwendet, um über die Liste zu loopen.It akzeptiert drei Argumente. Für diesen Fall werden zwei ausreichen.

3. addEventListener: - Ist verwenden Ereignis zu einem Element

4. Closures anbringt: Diese Funktionen der Umwelt 'erinnern', in dem sie erstellt wurden.

Hope this Snippet

//Get all the matched Elements 
var matches = document.querySelectorAll("div.mydiv"); 
//Use an variable to rememeber previous clicked element 
var prevIndex = -1; // 
// Loop over the list 
matches.forEach(function(item,index){ 
(function(i){ // A closure is created 
    item.addEventListener('click',function(){ 
     // if any previous element was clicked then rest it's background 
     if(prevIndex !== -1){ 
     matches[prevIndex].style.background="red"; 
     } 
     // change background of current element 
     item.style.background="#fff"; 
     // update prevIndex 
     prevIndex = i; 
    }) 
    }(index)) 

}) 

prüfen diese DEMO