Come intercettare il click su un elemento

Pubblicità
J

Jacopo Grazioli

Nuovo Utente
Messaggi
3
Reazioni
0
Punteggio
22
Buongiorno, ultimamente mi sto avvicinando a Javascript ma sto riscontrando dei problemi.
Ora sto provando ad intercettare il click del mouse su un elemento ma fino ad ora niente non funziona, il codice che ho creato è questo:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>selezione pulsante</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
.ball{
width: 100px;
height: 100px;
border-radius: 50px;
background-color: grey;
border: 1px solid #ff00ff;
margin-top: 10px;
float:left;
margin-left: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="cont-ball">
<div class="ball"></div>
<div class="ball"></div>
<div class="ball"></div>
</div>
<script type="text/javascript">
var pallina = document.getElementsByClassName("ball");
for (var i = 0 ; i <=pallina.length ; i++){
if(pallina.onclick){
pallina.style.backgroundColor = "red";
}
else{
pallina.style.backgroundColor = "grey";
}
}
</script>
</body>
</html>

Il mio intento era quello di intercettare su quale pallina è avvenuto il click e fargli cambiare il colore di sfondo ma quando mando in esecuzione mi da questo errore: Uncaught TypeError: Cannot read property 'onclick' of undefined.
Ho provato altre soluzioni ma non riesco proprio a farlo funzionare, ringrazio in anticipo chiunque mi sappia dare una soluzione.
 
Non puoi lavorare sugli elementi in questo modo.

Il ciclo che hai fatto puo' servire per associare una funzione all'evento onclick del singolo div, sara' poi la funzione stessa che colorera' la pallina.

Prova questo codice invece del tuo
Codice: 
var pallina = document.getElementsByClassName("ball");
for (var i = 0 ; i <pallina.length ; i++){
pallina[i].onclick = function(e) {
   e.target.style.backgroundColor = "red";
};
}
 
Mursey ha detto:
Non puoi lavorare sugli elementi in questo modo.

Il ciclo che hai fatto puo' servire per associare una funzione all'evento onclick del singolo div, sara' poi la funzione stessa che colorera' la pallina.

Prova questo codice invece del tuo
Codice: 
var pallina = document.getElementsByClassName("ball");
for (var i = 0 ; i <pallina.length ; i++){
pallina[i].onclick = function(e) {
   e.target.style.backgroundColor = "red";
};
}
Clicca per espandere...

Grazie mille, con il tuo metodo funziona, adesso ho reso la cosa più complessa inserendo tre palline.
L' ultimo problema che vorrei risolvere è il fatto che cliccando su una pallina che diventerà di sfondo rosso e successivamente cliccando su una seconda pallina la prima ritorni automaticamente con sfondo grigio.

var pallina = document.getElementsByClassName("ball");
var controlloZero = 0;
var controlloUno = 0;
var controlloDue = 0;
for(i = 0 ; i <= pallina.length ; i++){
pallina[2].onclick = function(e) {
if (controlloZero == 0 && controlloUno == 0) {
if(controlloDue == 0){
e.target.style.backgroundColor = "red";
controlloDue = 1;
}
else{
e.target.style.backgroundColor = "grey";
controlloDue = 0;
}
}
}
pallina[1].onclick = function(e) {
if (controlloZero == 0 && controlloDue == 0){
if(controlloUno == 0){
e.target.style.backgroundColor = "red";
controlloUno = 1;
}
else{
e.target.style.backgroundColor = "grey";
controlloUno = 0;
}
}
}
pallina[0].onclick = function(e) {
if (controlloUno == 0 && controlloDue == 0){
if(controlloZero == 0){
e.target.style.backgroundColor = "red";
controlloZero = 1;
}
else{
e.target.style.backgroundColor = "grey";
controlloZero = 0;
}
}
}
}
Clicca per espandere...
Questo è il mio codice attuale, probabilmente con molte meno righe si può ottenere lo stesso risultato ma non ho saputo fare di meglio.
manca solo un controllo per dire che quando clicco su una pallina le altre devono tornare con sfondo grigio ma non no come dirlo con js
 

Allegati

Ultima modifica:
E' sufficiente questo:
Codice: 
        var pallina = document.getElementsByClassName("ball");
        for (var i = 0 ; i < pallina.length ; i++) {
            pallina[i].onclick = function (e) {
                for (var j = 0 ; j < pallina.length ; j++) {
                    pallina[j].style.backgroundColor = "grey";
                }
                e.target.style.backgroundColor = "red";
            };
        }

Questa soluzione va oltre il javascript, e' un modo di ragionare che ti verra' con l'esperienza.
La soluzione piu' semplice e' spesso la migliore, analizza un problema dividendolo in sottoproblemi.
 
Mursey ha detto:
E' sufficiente questo:
Codice: 
        var pallina = document.getElementsByClassName("ball");
        for (var i = 0 ; i < pallina.length ; i++) {
            pallina[i].onclick = function (e) {
                for (var j = 0 ; j < pallina.length ; j++) {
                    pallina[j].style.backgroundColor = "grey";
                }
                e.target.style.backgroundColor = "red";
            };
        }

Questa soluzione va oltre il javascript, e' un modo di ragionare che ti verra' con l'esperienza.
La soluzione piu' semplice e' spesso la migliore, analizza un problema dividendolo in sottoproblemi.
Clicca per espandere...

ciao Mursey, praticamente col tuo script una volta che intercetta il click su un elemento fa partire un ciclo for che da il colore grey a tutti gli altri elementi giusto?
 
Pubblicità
Pubblicità
Indietro
Top