title: How to change the background image of a button using JavaScript?
body: <p>I want to change the background image of a button using Javascript. Here is what I am currently trying, but it is failing. </p>
  
  <p>HTML code - </p>
  
  <pre><code>      &lt;tr id="Rank1"&gt;
                &lt;td&gt;&lt;button class="darkSquare"&gt;&lt;/button&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;button class="lightSquare" &gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button class="darkSquare" &gt;&lt;/button&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;button class="lightSquare" &gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button id="e1" class="darkSquare" &gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button class="lightSquare" &gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button class="darkSquare" &gt;&lt;/button&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;button class="lightSquare"&gt; &lt;/button&gt;&lt;/td&gt;
              &lt;/tr&gt;
  </code></pre>
  
  <p>JavaScript Code</p>
  
  <pre><code>        initializer();
  
          function initializer()
           {
             var tableRow = document.getElementById("Rank1");
  
             var buttons = tableRow.getElementsByTagName("button");
  
             for(b in buttons)
              {
                 console.log(b.toString());
                 b.style.backgroundImage = "url('darkSquare.jpg')";
              }
           }
  </code></pre>
  
  <p>In the console, I get an error saying b.style is undefined.             </p>