为 getElementsByTagName 指定索引

Question

我试图找到一种方法来从按钮中为所选节点指定索引号，但我未能获得它的逻辑，我尝试了运行一个 For 循环，但它只会调用所有按钮，而我希望单击的按钮只执行该功能 HTML:

    <div>
            <button onclick="Change()">Change Color</button>
            <button onclick="Change()">Change Color</button>
            <button onclick="Change()">Change Color</button>
            <button onclick="Change()">Change Color</button>
            <button onclick="Change()">Change Color</button>
    </div>

CSS:

.ChangedColor{
    color:red;
}

JS:

function Change(){
    var y = document.getElementsByTagName("button")[y.length];
    y.classList.toggle("ChangedColor");
}

我很确定我使用的逻辑是错误的，但我想不出除了循环之外的其他方法，即使那样，它也不起作用并显示错误。有人可以告诉我如何根据用户单击的按钮指定索引吗？

Answer 1

这样的事情对你有帮助吗？

    <div>
            <button onclick="Change(this)">Change Color</button>
            <button onclick="Change(this)">Change Color</button>
            <button onclick="Change(this)">Change Color</button>
            <button onclick="Change(this)">Change Color</button>
            <button onclick="Change(this)">Change Color</button>
    </div>

function Change(ix){
  ix.classList.toggle("ChangedColor");
}

Answer 2

从事件对象中获取被点击的元素

function Change() {
  const btn = event.currentTarget;
  btn.classList.toggle("ChangedColor");
}

.ChangedColor {
    color:red;
}

<div>
  <button onclick="Change()">Change Color</button>
  <button onclick="Change()">Change Color</button>
  <button onclick="Change()">Change Color</button>
  <button onclick="Change()">Change Color</button>
  <button onclick="Change()">Change Color</button>
</div>

为 getElementsByTagName 指定索引

Specifying an index for getElementsByTagName

html

javascript

getelementsbytagname