JavaScript применяется только к одному div

У меня есть два div с одним классом.

<div class="html-code"></div>
<div class="html-code"></div>

Я добавил JavaScript в класс. Я принимал такую ​​переменную.

var html = document.getElementsByClassName("html-code")[0];

Странно, что JavaScript, который я использовал в переменной html, применяется только к первому div, но не к второму. В чем может быть проблема? Спасибо заранее.

0
задан 13 August 2018 в 15:19

5 ответов

Чтобы ответить на вопрос, когда вы это сделаете:

document.getElementsByClassName("html-code");

Ответ представляет собой объект типа массива, называемый HTMLCollection, тогда

document.getElementsByClassName("html-code")[0]//<-- first element

document.getElementsByClassName("html-code")[1]//<-- second element

Поскольку класс html-code имеет два совпадения в этом случае.

Для итерации по элементам вы не можете использовать методы массива, такие как .map() или filter(), вы должны использовать методы, используемые для объектов:

for(var element in object) {//code}

или общий:

for(let i; i<object.length;i++){//code}

и методы, использующие HTMLCollection , например:

var keys = Object.keys(object);
1
ответ дан 15 August 2018 в 17:01

Спасибо за вашу помощь.

Я, наконец, решил проблему, добавив две переменные, а также две функции.

var html = document.getElementsByClassName("html- 
code")[0];

html.onclick = function() {
// My JavaScript function
}

var html = document.getElementsByClassName("html- 
code")[1];

html.onclick = function() {
// Same function as above
}

Это работает на меня. Я понял, что если есть два div с одним классом, мы должны добавить две функции.

0
ответ дан 15 August 2018 в 17:01

Вы можете попробовать:

var html = document.getElementsByClassName("html-code");

Array.prototype.forEach.call(html, function(el) {
  el.style.backgroundColor = "green";
});
.html-code {
  width: 100px;
  height: 100px;
  margin-bottom: 2px;
  border: 1px solid #ccc;
}
<div class="html-code"></div>
<div class="html-code"></div>

3
ответ дан 15 August 2018 в 17:01

Удалите индекс [0] с конца, чтобы выбрать все divs, как это.

var html = document.getElementsByClassName("html-code");

или используйте такой цикл:

var html = document.getElementsByClassName("html-code");

for (i in html) {
  html[i].innerHTML = "div " + i;
}
<div class="html-code"></div>
<div class="html-code"></div>

3
ответ дан 15 August 2018 в 17:01

Удалите [0] из вашего кода, и он будет работать. [0] для 0-го индекса, а точнее, для первого элемента.

var html = document.getElementsByClassName("html-code");
0
ответ дан 15 August 2018 в 17:01
  • 1
    Если я сделаю, как вы говорите. Функция не применяется к обоим divs – Gäñèsh Kàlyâñ Kömmîsëttï 13 August 2018 в 15:21
  • 2
    @ GäñèshKàlyâñKömmîsëttï вам также нужно изменить свою функцию. getElementsByClassName возвращает несколько результатов. В вашем примере кода вы смотрите только на первый элемент [0]. – Christian Scillitoe 13 August 2018 в 15:22

Другие вопросы по тегам:

Похожие вопросы: