title: changing button style with another button
body: <p>Is there a way to change a CSS button's style and/or text based on clicking another button? Let me give you a simplified example: </p>
  
  <p>Say at the top of the page there are a series of buttons asking you to pick a category. You click on one of three buttons.</p>
  
  <p>Other buttons on the page should change depending on which category button was clicked. For example, if you clicked Category A button, button 2 might be green and say "click for something", while if you picked Category B, it would be red and say "don't click this". (It wouldn't be disabled, just marked. I want to discourage clicking, not prohibit it.) Also, the buttons would need to have a default in case someone wants to click them without picking a category.  </p>
  
  <p>Thank you.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I apologize for not including code, but I wasn't sure even <em>if</em> it could be done. With the guidance of the first answerers, I have made an attempt, but it still doesn't work. </p>
  
  <pre><code>&lt;style&gt;
  table, th, td {border-collapse: collapse; border: 2px solid; color: #FFFFFF}
  th {background-color: black;}
  
  .top {width:110px; height: 25px; background-color: #FFFF00; color: #000000;}
  .off {width:110px; height: 25px; background-color: #DDDDDD; color: #000000;}
  
  &lt;/style&gt;
  
  
  &lt;table&gt;
  &lt;tr&gt;
      &lt;th colspan=4&gt;Click on favorite sport:&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;button class="top" onclick=document.getElementById("bb").style.background-color: #009900; color = #FFFFF;&gt;BASEBALL&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="top" onclick=document.getElementById("fb").style.background-color: #0000DD; color = #FFFFFF;&gt;FOOTBALL&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="top" onclick=document.getElementById("bk").style.background-color: #EE4500; color = #FFFFFF;&gt;BASKETBALL&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="top" onclick=document.getElementById("bk").style.background-color: #89CFF0; color = #FFFFFF;&gt;HOCKEY&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
  &lt;th colspan=4&gt;Click on favorite team:&lt;/th&gt;&lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;button class="off" id="bb"&gt;YANKEES&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="off" id="fb"&gt;COWBOYS&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="off" id="bk"&gt;CELTICS&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="off" id="bk"&gt;CANADIENS&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
      &lt;td&gt;&lt;button class="off" id="bb"&gt;CUBS&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="off" id="fb"&gt;PACKERS&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="off" id="bk"&gt;LAKERS&lt;/button&gt;&lt;/td&gt;
      &lt;td&gt;&lt;button class="off" id="bk"&gt;PENGUINS&lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I <em>am</em> trying, but learning new coding at my age is tedious. </p>
  
  <p>Here is an idea of what <em>should</em> happen:</p>
  
  <p><a href="https://i.stack.imgur.com/1Mi0f.jpg" rel="nofollow noreferrer">Sample image</a></p>