javascript - 如何选择特定数量的按钮并在选择后更改所选按钮的颜色

Question

ul.number-list li {
  list-style: none;
  display: inline-block;
}
ul.number-list li a {
  display: block;
  width: 35px;
  height: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  line-height: 35px;
  text-align: center;
  background: purple;
  color: #fff;
  cursor: pointer;
}

<ul class="number-list">
  <li>
    <a role="button">1</a>
  </li>
  <li>
    <a role="button">11</a>
  </li>
  <li>
    <a role="button">31</a>
  </li>
  <li>
    <a role="button">12</a>
  </li>
  <li>
    <a role="button">16</a>
  </li>
  <li>
    <a role="button">6</a>
  </li>
  <li>
    <a role="button">12</a>
  </li>
  <li>
    <a role="button">21</a>
  </li>
  <li>
    <a role="button">2</a>
  </li>
  <li>
    <a role="button">44</a>
  </li>
</ul>

我是 javascript 的新手，我需要帮助，如果有人能提供帮助，我将不胜感激! 在这种情况下，我有一个按钮列表，我想限制选择按钮的数量，比如 6 个按钮。每个按钮只能选择一次，在选择它的颜色后会发生变化。请帮我写这段代码。谢谢

Answer 1

var SelectCount=0;
function ButtonSelected(id) {
    if (SelectCount < 3) {
        document.getElementById(id).style.backgroundColor="red";
        SelectCount+=1;
    }
}

ul.number-list li {
  list-style: none;
  display: inline-block;
}
ul.number-list li a {
  display: block;
  width: 35px;
  height: 35px;
  -webkit-border-radius: 35px;
  border-radius: 35px;
  line-height: 35px;
  text-align: center;
  background: purple;
  color: #fff;
  cursor: pointer;
}

<ul class="number-list">
  <li >
    <a id="n1" onclick="ButtonSelected('n1')" role="button">1</a>
  </li>
  <li>
    <a id="n2" onclick="ButtonSelected('n2')" role="button">11</a>
  </li>
  <li>
    <a id="n3" onclick="ButtonSelected('n3')" role="button">31</a>
  </li>
  <li>
    <a id="n4" onclick="ButtonSelected('n4')" role="button">12</a>
  </li>
  <li>
    <a id="n5" onclick="ButtonSelected('n5')" role="button">16</a>
  </li>
  <li>
    <a id="n6" onclick="ButtonSelected('n6')" role="button">6</a>
  </li>
  <li>
    <a id="n7" onclick="ButtonSelected('n7')" role="button">12</a>
  </li>
  <li>
    <a id="n8" onclick="ButtonSelected('n8')" role="button">21</a>
  </li>
  <li>
    <a id="n9" onclick="ButtonSelected('n9')" role="button">2</a>
  </li>
  <li>
    <a id="n10" onclick="ButtonSelected('n10')" role="button">44</a>
  </li>
</ul>

此代码会将按钮更改为红色并增加计数器。在此代码中，最多可以选择三个按钮。无法取消选择按钮。