Colorare i button con una function

[criric]

ma la funzione non vede l'id del button ?

si,infatti
controlla se gli id sono messi nel modo giusto

 

[cavaliere123]

ho cambiato anche nome dell'id per evitare conflitti ma sempre lo stesso... per tabelle pari funziona, per tabelle dispari non inverte il colore.... assurdooooooo....
Posto ad esempio due button di due tabelle, la prima e la seconda.... che cambia ?????

Ultimo button della prima tabella :

<INPUT id ="forum15" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/>

primo button della seconda tabella :

<INPUT id ="forum16" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img16');"/>

 

[criric]

Se la prima tabella inizia con il blu e ha le celle dispari è normale che la seconda inizi con il rosso

è questo che intendi?

 

[cavaliere123]

Allora ho per adesso sette tabelle ed in ogni tabella ho 15 celle e quindi 15 td, adesso ho messo in ogni cella il tasto button visionato in precedenza e vorrei che se la cella è rossa il tasto è blu e viceversa...
La funzione colora celle funziona benissimo e mi inverte i colori delle celle man mano, come visto in discussioni precedenti... adesso ho messo la funzione colora tasto per invertire i colori come detto prima...
Succede che nella prima tabella i colori del button non si inverte e tiene lo stesso colore della cella, invece nella tabella seconda il colore del tasto si inverte....
me sa che ho sbagliato a mettere i codici che partono da 1, vanno in conflitto con il vettore dei td che invece parte da 0 ....

 function coloracelle() { 
               
            for(var g = 1; g < 8; g++) {
            var tabella = document.getElementById("tabellas"+g);
                                                 
 var td = tabella.getElementsByTagName('td');
    var count_td = td.length;
for(var i = 0; i < count_td; i++) {
if(i%2==0) {
td[i].style.backgroundColor = "TOMATO";
}else{
td[i].style.backgroundColor = "DODGERBLUE"; }
}
} }

             function coloratasto() {

             for(var d = 1; d <106; d++) {
               var tastost = document.getElementById("forum"+d); 


                        if(d%2==0) {    
                               tastost.style.backgroundColor  = "DODGERBLUE"; 
                         }else{
                               tastost.style.backgroundColor  = "TOMATO"; }
                               
                                       } }

ecco le due funzioni ....

 

[cavaliere123]

Me sa che forse è meglio che riassesto tutto il codice, facendo partire tutti gli indici da " 0"

 

[criric]

e se provi cosi?

function coloracelle() { 
        var countButton = 1;
        
        for(var g = 1; g < 8; g++) {
            var tabella = document.getElementById("tabellas"+g);
                                                 
            var td = tabella.getElementsByTagName('td');
            var count_td = td.length;
            for(var i = 0; i < count_td; i++) {
                if(i%2==0) {
                    td[i].style.backgroundColor = "TOMATO";
                    document.getElementById("buttono"+countButton).style.backgroundColor  = "DODGERBLUE";
                }else{
                    td[i].style.backgroundColor = "DODGERBLUE"; 
                    document.getElementById("buttono"+countButton).style.backgroundColor  = "TOMATO";
                }
            }
            countButton++;
        } 
    }

 

[cavaliere123]

Provato ma purtroppo i button non si colorano proprio...

 

[cavaliere123]

Mi sono ricordato di fare la sostituzione di buttono con forum ....
ma i primi 4 della prima tabella vanno bene... poi diventano tutti senza colore...

 

[Vale2]

Ciao,

<table style="text-align: left; width: 100%;" border="1"
 cellpadding="2" cellspacing="2" id="tabellas">
  <tbody> 
  <tr> 
    <td align="center"><INPUT id ="forum0" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum1" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum2" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
  </tr>
  <tr> 
    <td align="center"><INPUT id ="forum3" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum4" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum5" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
  </tr>
  <tr>
    <td align="center"><INPUT id ="forum6" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum7" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum8" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
  </tr>
  <tr>
    <td align="center"><INPUT id ="forum9" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum10" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
    <td align="center"><INPUT id ="forum11" class="button1" TYPE="button" VALUE="Chiuda Immagine" onclick="piccola('img15');"/></td>
  </tr>
</table>
<table width="75%" border="1">


<script type="text/javascript">
	var a = document.getElementsByTagName('TD');
        var n = document.getElementsByTagName('TD').length;
            for(var i = 0; i < n; i++) {
	    var tastost = document.getElementById("forum"+i);
	         if(i%2==0) {
            a[i].style.backgroundColor = "TOMATO";
            tastost.style.backgroundColor  = "DODGERBLUE"; 
		    }else{
           a[i].style.backgroundColor = "DODGERBLUE";
          tastost.style.backgroundColor  = "TOMATO";
	 }
  }
</script>

Per una tabella, metti il codice per tabella+variabile


Valeria.

 

[cavaliere123]

Ho fatto cosi.... prendendo i suggerimenti di entrambi e funziona....
In questo caso... la funzione se ne frega di quante tabelle c'è ne sono.... conta solo tutti i " td " che trova a quanto ho capito e poi per non cambiare l'id ai circa 106 button ho imposto k = i+1 e funziona...

                     function coloracelle() { 

                       var a = document.getElementsByTagName('TD');
        var n = document.getElementsByTagName('TD').length;
            for(var i = 0; i < n; i++) {  var k = i+1 ;
	    var tastost = document.getElementById("forum"+k);
	         if(i%2==0) {
            a[i].style.backgroundColor = "TOMATO";
            tastost.style.backgroundColor  = "DODGERBLUE"; 
		    }else{
           a[i].style.backgroundColor = "DODGERBLUE";
          tastost.style.backgroundColor  = "TOMATO";
	           }
                 } }

Spero di essere stato chiaro e grazie davvero...
Domenico.

 

[Vale2]

Ciao,

hai fatto bene a ridurre il codice al minimo indispensabile, se hai anche 40 tabelle ma tutte uguali,

tutti i button si chiamano forum?

Valeria.

 

[cavaliere123]

Salve Valeria e scusa se non ti ho salutato prima... si i button sono tutti quanti uguali e si differenziano solo chiaramente per id diverso....
id = "forum1"
id="forum2"
......

 

[Vale2]

Ciao,

se parti da 0 per id non ti serve var k = i+1

e

document.getElementById("forum"+k);

bastava come avevo scritto io.

PS: puoi far partire un ciclo da 1 2 o 3 ma il length considera anche lo [0] funziona uguale perché limiti il ciclo in base ai td, ma in termine di programmazione non è del tutto corretto.




Valeria.

 

[cavaliere123]

Certo Valeria hai perfettamente ragione, ma purtroppo succedeva che al td[0] non corrispondeva il forum[0] ( che non avevo proprio inserito ), ma forum[1] e quindi il caos.... avrei dovuto cambiare l'elenco dei forum facendolo partire da id = "forum0", ma avendo associato ad esso anche altre funzioni che con partono con i for da 1, avrei dovuto cambiare tutto...
Non chiedermi il perchè di questo... non mi ricordo neanche più... il mio problema a parte la poca conoscenza della sintassi è principalmente la mole dei dati ogni volta... e ti assicuro che diventa snervante e creo degli errori iniziali inutili...

 

[Vale2]

Ciao,

buon proseguimento con il progetto :fonzie:


Valeria.

 

[cavaliere123]

Buon proseguimento anche a te e grazie sempre per l'accortenza che mi mostrate..