n° 219
Novembre 2017
Dicembre 14, 2017, 12:52:02 *
Benvenuto! Accedi o registrati.
Hai dimenticato l'e-mail di attivazione?

Accesso con nome utente, password e durata della sessione
Notizia:
 
   Indice   Linux Windows Techassistance Gameassistance videogame hardware Aiuto Ricerca Agenda Downloads Accedi Registrati  


* Messaggi recenti
Messaggi recenti
Pagine: [1]   Vai giù
  Stampa  
Autore Discussione: Come intercettare il click su un elemento  (Letto 3784 volte)
0 utenti e 1 Utente non registrato stanno visualizzando questa discussione.
jacopo.g
Newbie
*

Karma: +0/-0
Scollegato Scollegato

Messaggi: 2


Mostra profilo E-mail
« inserita:: Novembre 09, 2015, 04:38:46 »

<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.
Registrato
paooolino
Full Member
***

Karma: +16/-10
Scollegato Scollegato

Messaggi: 380

Ideas in programming


Mostra profilo WWW
« Risposta #1 inserita:: Novembre 09, 2015, 06:10:28 »

ci sono vari errori

i più evidenti:

1) fai un ciclo sull'array "pallina" ma poi all'interno del ciclo, per riferirti alla singola pallina, dovresti usare pallina

2) gli eventi non si attaccano così... se non vuoi usare jquery (scelta legittima, ma ti semplificherebbe la vita in questo caso) leggi qui
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

occhio che addeventlistener per IE<9 non funziona, devi usare attachEvent

http://community.sitepoint.com/t/event-binding-with-plain-js/32746
Registrato

paooolino
Full Member
***

Karma: +16/-10
Scollegato Scollegato

Messaggi: 380

Ideas in programming


Mostra profilo WWW
« Risposta #2 inserita:: Novembre 09, 2015, 06:36:22 »

riscrivo il post visto che mancano dei caratteri...

ci sono vari errori

i più evidenti:

1) fai un ciclo sull'array "pallina" ma poi all'interno del ciclo, per riferirti alla singola pallina, dovresti usare
Codice:
pallina[i]

2) gli eventi non si attaccano così... se non vuoi usare jquery (scelta legittima, ma ti semplificherebbe la vita in questo caso) leggi qui
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

occhio che addeventlistener per IE<9 non funziona, devi usare attachEvent

http://community.sitepoint.com/t/event-binding-with-plain-js/32746
Registrato

jacopo.g
Newbie
*

Karma: +0/-0
Scollegato Scollegato

Messaggi: 2


Mostra profilo E-mail
« Risposta #3 inserita:: Novembre 10, 2015, 12:05:51 »

Grazie mille per il tuo aiuto, ho provato vari metodi e ho risolto il problema.
Adesso ho reso più complesso il codice inserendo tre palline e inserendo delle condizioni.
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;
                     }
               }
            }
         }

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
Registrato
Pagine: [1]   Vai su
  Stampa  
 
Vai a:  

Copyright © 2017 Edizioni Master SpA. p.iva : 02105820787

Tutti i diritti di proprietà letteraria e artistica riservati. - Privacy



powered by Simple Machines