Javascript function for color exchange

Asked

Viewed 179 times

0

I am developing a function for color customization of a template for people to have the freedom to customize the way they want. I created a JS function for this, it worked perfectly when it was just a palette of colors. When I inserted the second color palette, the second palette does not work.

<script type="text/javascript">
      window.onload = function(){
        	var palheta = document.getElementById('palheta');
        	var tds = palheta.getElementsByClassName('td1');
          var palheta2 = document.getElementById('palheta2');
          var tds2 = palheta2.getElementsByClassName('td2');

      /* for para primeira palheta */
    	for (var i = 0; tds.length; i++)
    	{
    		tds[i].onmousedown = function()
    		{
    		    if( window.getComputedStyle ) {
    			  bg = document.defaultView.getComputedStyle(this, null).backgroundColor;
    			} else if( palheta.currentStyle ) {
    			  bg = document.getElementById(this.id).currentStyle['backgroundColor'];
    			}

    			document.getElementById('cor').value = bg;
    	document.body.style.backgroundColor = bg; /* colore o background do body*/


    		}
    	}
      
      /*for para segunda palheta*/
      for (var i2 = 0; tds2.length; i++)
      {
        tds2[i].onmousedown = function()
        {
          if( window.getComputedStyle ) {
            bg2 = document.defaultView.getComputedStyle(this, null).backgroundColor;
          } else if( palheta2.currentStyle ) {
            bg2 = document.getElementById(this.id).currentStyle['backgroundColor'];
          }
          document.getElementById('cor2').value = bg2;

          $("#div1").css("background-color", bg2); /*colore uma div*/

        }
      }

  }
</script>
/*palheta de background*/
#vermelho{
  background-color:red;
}
#verde{
  background-color: green;
}
#amarelo{
  background-color:yellow;
}
#azul{
  background-color:blue;
}
#preto{
  background-color:black;
}


/*palheta da div1*/
#cinza{
  background-color:grey;
}

#rosa{
  background-color:pink;
}

#black{
  background-color:black;
}

#branco{
  background-color:white;
}

#gold{
  background-color:yellow;
}


.cor{
  display:none;
}
 tr td{
   border:1px solid black;
  width:30px;
  height:30px;
  float:left;
}
<body>

<table id="palheta">
  <tr>
    <h3> Palheta de cores 1 </h3>
    <td class="td1" id="vermelho"></td>
    <td class="td1" id="azul"></td>
    <td class="td1" id="amarelo"></td>
    <td class="td1" id="preto"></td>
    <td class="td1" id="verde"></td>
  </tr>
</table>
<input type="text" class="cor" name="cor" id="cor" />

<table id="palheta2">
  <tr>
    <h3> Palheta de cores 2 </h3>
    <td class="td2" id="cinza"></td>
    <td class="td2" id="rosa"></td>
    <td class="td2" id="black"></td>
    <td class="td2" id="branco"></td>
    <td class="td2" id="gold"></td>
  </tr>
</table>
<input type="text" class="cor" name="cor2" id="cor2" />


<div id="div1">
</div>

</body>

javascript html css

2 answers

1

Your second is using the first for i. Use the code below:

/*for para segunda palheta*/
      for (var j = 0; tds2.length; j++)
      {
        tds2[j].onmousedown = function()
        {
          if( window.getComputedStyle ) {
            bg2 = document.defaultView.getComputedStyle(this, null).backgroundColor;
          } else if( palheta2.currentStyle ) {
            bg2 = document.getElementById(this.id).currentStyle['backgroundColor'];
          }
          document.getElementById('cor2').value = bg2;

          $("#div1").css("background-color", bg2); /*colore uma div*/

        }
      }

1


Check the cycle startup.

for (var i2 = 0; i2 < tds2.length; i2++)

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.