title: Trouble with debugging
body: <p>I have a small problem with javascript, because it doesn't understand me and in some kind I do not understand what it's doing with my script. I am trying to write a chess program for my own. First, here is a part of my code:</p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  
      &lt;title&gt;
          Klassix
      &lt;/title&gt;    
  
  
      &lt;!--    Scripts   --&gt;
      &lt;link   rel="stylesheet" 
              href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;
      &lt;/script&gt;
  
      &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;
      &lt;/script&gt;
  
      &lt;script&gt;
  
          $(function() {
              $( ".draggable" ).draggable({ snap: true });
          });
      &lt;/script&gt;
  
  
  
  &lt;style type="text/css"&gt;
  
      #board      {   position
                      height:840px;
                      width:840px;
                      border:20px solid #61380B;
                      border-collapse:collapse;   }
  
      .horizontal {   height:100px;
                      width:100px;
                      border:0px; }
  
      .vertical   {   height:100px;
                      width:100px;
                      border:0px; }   
  
  
      &lt;/style&gt;
  
  &lt;/head&gt;
  
  
  &lt;body&gt;
  
          &lt;div id="game"&gt;
              &lt;table id="board"&gt;
              &lt;/table&gt;
          &lt;/div&gt;
  
  
          &lt;script type="text/javascript"&gt;     
  
          var board = document.getElementById('board')
          var color = 0; 
  
          for( var h = 1; h &lt; 9; h++) {
  
              var newTr = document.createElement('tr');
              newTr.setAttribute('id', 'tr' + h)
              newTr.setAttribute('class', 'vertical')
              board.appendChild(newTr);
  
              for( var v = 1; v &lt; 9 ; v++) {
  
  
                  color = v % 2 ;
  
                  var newTd = document.createElement('td');
                  newTd.setAttribute('id', 'td' + v)
                  newTd.setAttribute('class', 'horizontal')
  
                  if(h === 1 || h === 3 || h === 5 || h === 7 &amp;&amp; color === 0) {
                      newTd.style.backgroundColor = '#000000';
                  } else if(h === 1 || h === 3 || h === 5 || h === 7 &amp;&amp; color === 1) {
                      newTd.style.backgroundColor = '#ffffff';        
                  } else if( h === 2 || h === 4 || h === 6 || h === 8 &amp;&amp; color === 1) {
                      newTd.style.backgroundColor = '#000000';
                  } else if(h === 2 || h === 4 || h === 6 || h === 8  &amp;&amp; color === 0) {
                      newTd.style.backgroundColor = '#ffffff';        
                  }
  
                  document.getElementById('tr' + h).appendChild(newTd);   
                  console.log(h + '|' + v + '|' + color)                  
              }
          }
      &lt;/script&gt;
  
  &lt;/body&gt; 
  </code></pre>
  
  <p>So, as you can see, I try to generate a chess board with javascript in order to avoid writing tons of text. The board should be alternately black and white. This should be clear with the if-conditions I have made in the last script part. But my browser shows me that the first 6 rows are black and the last 2 rows white and black, as it should be. 
  Soooo, Finally my question is how to do it right or maybe I should take a completely different approach. I hope someone can help me. (I am not an English native speaker. Maybe you can excuse certain mistakes.)</p>