Question

我想更改onClick上元素的颜色 - 但是我已经有一个onCLick函数附加到HTML元素。这是我的代码

function changeColor(cell){
    for (var i=0;i<cell.length;i++){
        cell[i].classList.remove("active")}
        elem.classList.add("active");
    }

}

table>
      <tr>
        <td><input  type="button"class= "input" id="cell1" onclick="clickThis(this.id)"></input></td>
        <td><input  type="button"class= "input" id="cell2" onclick="clickThis(this.id)"></input></td>
        <td><input  type="button"class= "input" id="cell3" onclick="clickThis(this.id)"></input></td>
      </tr> 
      <tr>

Answer 1

您可以在onclick属性中进行多项功能调用：

onclick="clickThis(this.id); changeColor(this);"

然而将它包装成一个更清晰：

onclick="cellClick(this);"

function cellClick(cell){
   clickThis(cell.id);
   changeColor(cell);
}

如果您从HTML中抽象出来并使用event listeners，那就更好了。

Answer 2

最好使用addEventLister（）而不是使用内联处理程序....

但是要使用内联处理程序，您可以

＆＃13;

function clickThis(id) {
  snippet.log('clicked: ' + id)
};

function changeColor(cell) {
  var tr = cell.parentNode;
  for (var i = 0; i < tr.children.length; i++) {
    tr.children[i].classList.remove("active")
  }
  cell.classList.add("active");
}

＆＃13;

.active {
  color: red;
  border: 1px solid green;
}

＆＃13;

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>


<table>
  <tr>
    <td>
      <input type="button" class="input" id="cell1" onclick="clickThis(this.id); changeColor(this.parentNode)" />
    </td>
    <td>
      <input type="button" class="input" id="cell2" onclick="clickThis(this.id); changeColor(this.parentNode)" />
    </td>
    <td>
      <input type="button" class="input" id="cell3" onclick="clickThis(this.id); changeColor(this.parentNode)" />
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" class="input" id="cell4" onclick="clickThis(this.id); changeColor(this.parentNode)" />
    </td>
    <td>
      <input type="button" class="input" id="cell5" onclick="clickThis(this.id); changeColor(this.parentNode)" />
    </td>
    <td>
      <input type="button" class="input" id="cell6" onclick="clickThis(this.id); changeColor(this.parentNode)" />
    </td>
  </tr>
</table>

＆＃13;

在点击时向元素添加类

2 个答案: