Javascript - Problema evidenziamento div

Forum - Javascript - Problema evidenziamento div

LukeMilan (Normal User)
Rookie

Messaggi: 42
Iscritto: 30/05/2012

Postato alle 21:01
Lunedì, 28/07/2014

Dato questo codice:
<script>
window.onload = function WindowLoad(event) {
document.getElementById('result').onmouseover=function(){this.style.background='#eee'}
document.getElementById('result').onmouseout=function(){this.style.background='#fff'}
}
</script>
<div id="result">a</div>
<div id="result">b</div>
<div id="result">c</div>

Mi evidenzia al passaggio del mouse soltanto il primo elemento..perchè??

Ultima modifica effettuata da LukeMilan il 28/07/2014 alle 21:17

Bonny (Member)
Expert

Messaggi: 437
Iscritto: 24/04/2009

Postato alle 9:34
Martedì, 29/07/2014

Devi usare il selettore di tipo class:

Codice sorgente - presumibilmente Delphi

<!DOCTYPE html>
<html>
<head></head>
<body>
 
<div class="result">a</div> 
<div class="result">b</div> 
<div class="result">c</div> 
 
<script type="text/javascript"> 
 
function onMouseOver(){
  this.style.background='#eee';
}
 
function onMouseOut(){
  this.style.background='#fff';
}
 
window.onload = function WindowLoad(event) { 
 //prendo tutti gli elementi con class = result
 var divs = document.getElementsByClassName('result');
 //per ogni elemento
 for(var i in divs){
   //associo le mie funzioni agli eventi che mi interessano
   divs[i].onmouseover = onMouseOver;
   divs[i].onmouseout  = onMouseOut;
 }
 
} 
</script>
 
</body>
</html>

perchè la funzione getElemetById(id) ritorna l'elemento con l'id specificato a differenza di getElementsByClassName (come vedi Elements) ritorna tutti gli elementi della classe specificata.

Ultima modifica effettuata da Bonny il 29/07/2014 alle 9:35

chiara91 (Normal User)
Newbie

Messaggi: 10
Iscritto: 07/05/2014

Postato alle 17:48
Venerdì, 12/09/2014

Non è corretto avere più elementi con lo stesso id, dovresti usare le classi.