У меня есть два div с одним классом.
<div class="html-code"></div>
<div class="html-code"></div>
Я добавил JavaScript в класс. Я принимал такую переменную.
var html = document.getElementsByClassName("html-code")[0];
Странно, что JavaScript, который я использовал в переменной html, применяется только к первому div, но не к второму. В чем может быть проблема? Спасибо заранее.
Чтобы ответить на вопрос, когда вы это сделаете:
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);
Спасибо за вашу помощь.
Я, наконец, решил проблему, добавив две переменные, а также две функции.
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 с одним классом, мы должны добавить две функции.
Вы можете попробовать:
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>
Удалите индекс [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>
Удалите [0] из вашего кода, и он будет работать. [0] для 0-го индекса, а точнее, для первого элемента.
var html = document.getElementsByClassName("html-code");