Указание индекса для getElementsByTagName - PullRequest
Новая
       72

Указание индекса для getElementsByTagName

0 голосов
/ 11 апреля 2020

Я пытаюсь найти способ указать индексный номер для выбранного узла с помощью кнопки , но мне не удалось получить для него логи c, я попытался запустить For l oop, но он просто вызовет все кнопки, пока я хочу, чтобы нажатая кнопка выполняла только функцию 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");
}

Я уверен, что используемая им логика c неверна, но я не могу придумать иного пути, кроме циклов. Даже с этим, он не работал и показал ошибку. Может кто-нибудь сказать мне, как указать индекс в зависимости от того, какая кнопка была нажата пользователем?

Ответы [ 2 ]

2 голосов
/ 11 апреля 2020

Получить элемент, по которому щелкают, из объекта события 

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>
2 голосов
/ 11 апреля 2020

Поможет ли вам что-нибудь подобное? 

    <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");
}
...