JS: Не удается установить свойство неопределенного

Question

У меня есть следующий JS код:

<script type="text/javascript"> 
var a = document.getElementsByClassName("sub_category_image"); 
for(i=0; i < a.length ; i++){ 
    var b = a[i]; 
    b.style.width = "100px"; 
    b.style.height = "100px"; 
} 
</script> 

<script type="text/javascript"> 
var x = document.getElementsByClassName("sub_category_image").alt; 
var y = document.getElementsByClassName("sub_category_image"); 

if (x = "Cool Beans") { 
    y.style.width = "200px"; 
    y.style.height = "200px"; 
} 
</script> 

Первый сценарий, изменяет размер изображения всех изображений, который работает, но он делает некоторые другие изображения выглядят «некрасиво».

Второй скрипт, где я получаю ошибку Cannot: set property 'width' of undefined.. Я говорю JS искать первый тег alt, содержащий «Cool Beans», и если он найден, измените ширину и высоту стиля. Что не так? Я считаю, что он должен что-то сделать с моим объявлением var y, но у меня нет подсказки, чтобы исправить это.

Answer 1

Функция document.getElementsByClassName() возвращает массив (вы можете сказать это имя во множественном числе: getElement сек По Что-то).

Таким образом, вы должны установить индекс x и y работать на одном элементе массива:

<script type="text/javascript"> 

var x = document.getElementsByClassName("sub_category_image");  

for (var i=0; i<x.length; i++) { 
    if (x[i].alt === "Cool Beans") { 
    x[i].style.width = "200px"; 
    x[i].style.height = "200px"; 
    } 
} 

</script> 

Answer 2

Ваш код не работает так, как вы ожидаете.

Вы должны перебирать элементы и находить правильный.

var a = document.getElementsByClassName("sub_category_image"); 
for (var i=0; i < a.length; i++) { 
    var b = a[i]; 
    if (b.alt == "Cool Beans") { 
     b.style.width = "100px"; 
     b.style.height = "100px"; 
    } 
}