0

У меня есть вот такой код:

var item = document.querySelectorAll('.item');
var element = document.querySelectorAll('.control li');


for (var i = 0; i <= item.length; i++) {
    var dataContol = element.getAttribute("data-control");
    if(dataControl == i) {
        alert("Hello")
    }
}
* {
    margin: 0;
    padding: 0;
}

.item {
    width: 400px;
    display: inline-block;
    border: 1px solid green;
}

.control li {
    width: 40px;
    text-align: center;
    display: inline-block;
    border: 1px solid blue;
    background-color: red;
}
<body>
   
   <div class="container">
       <div class="item data-item">111111111111111</div>
       <div class="item data-item">222222222222222</div>
   </div>
   
   <div class="control">
       <ul>
           <li data-control="0">1</li>
           <li data-control="1">2</li>
       </ul>
   </div>
    
    <script src="script.js"></script>
</body>

После того, как я пытаюсь получить значение data-атрибута, вот в этой строке var dataContol = element.getAttribute("data-control"); Получаю ошибку: element.getAttribute is not a function Второй вечер не могу решить проблему, буду очень благодарен за помощь!)

1
  • 1
    ( ;...; ) element[i] 20 июн 2020 в 21:28

1 ответ 1

3

Во первых: опечатка в слове dataContol

Во вторых: метод querySelectorAll возвращает коллекцию, а не элемент.

Во третьих: for (var i = 0; i <= item.length; i++) надо ставить условие i < item.length если хочется перебрать элементы, иначе выйдите за пределы массива.

В четвёртых: когда вы используете нестандартные атрибуты data-* к ним нужно обращаться так element.dataset.НАЗВАНИЕ_АТРИБУТА

Вот исправленный пример:

var item = document.querySelectorAll('.item');
var element = document.querySelectorAll('.control li');


for (var i = 0; i < item.length; i++) {
    var dataControl = element[i].dataset.control;
    if(dataControl == i) {
        alert("Hello")
    }
}
* {
    margin: 0;
    padding: 0;
}

.item {
    width: 400px;
    display: inline-block;
    border: 1px solid green;
}

.control li {
    width: 40px;
    text-align: center;
    display: inline-block;
    border: 1px solid blue;
    background-color: red;
}
<body>
   
   <div class="container">
       <div class="item data-item">111111111111111</div>
       <div class="item data-item">222222222222222</div>
   </div>
   
   <div class="control">
       <ul>
           <li data-control="0">1</li>
           <li data-control="1">2</li>
       </ul>
   </div>
    
    <script src="script.js"></script>
</body>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.