Cannot read property 'style' of undefined but styles are working

Question

Error: Uncaught TypeError: Cannot read property 'style' of undefined. Styles are working when I'm choosing an input. this input:

var input = document.getElementById('pa_rama').value;
    var option = document.getElementById('pa_razmer').value;
    let ramka = document.getElementsByClassName('woocommerce-product-gallery__image');

       if(input == 'chernaya') {
    for(var i=0; i < input.length; i++) {
      ramka[i].style.border = '50px solid black';    
      ramka[i].style.boxShadow = 'none';
}   
}

What is wrong?

do you mean `i < ramka.length` instead of `i < input.length`? — Daniel A. White, Apr 05 '21 at 12:54

score 0 · Accepted Answer · answered Apr 05 '21 at 12:59

You should take a look at this post : How to correctly iterate through getElementsByClassName

What you probably need to do is :

var input = document.getElementById('pa_rama').value;
    var option = document.getElementById('pa_razmer').value;
    let ramka = document.getElementsByClassName('woocommerce-product-gallery__image');

       if(input == 'chernaya') {
    for(var i=0; i < ramka.length; i++) { //I think you want to loop on ramka.lenght and not input.lenght, right ?
      ramka.item(i).style.border = '50px solid black';    
      ramka.item(i).style.boxShadow = 'none';
}   
}

Thanks. I forgot that it should be `ramka.length` – Alex Apr 05 '21 at 13:35 — Alex, Apr 05 '21 at 13:35

score 0 · Answer 2 · answered Apr 05 '21 at 13:03

Check whether you added the <script> js file in bottom of the html

or try with onload function in javascript

window.onload = function() {
   var input = document.getElementById('pa_rama').value;
   var option = document.getElementById('pa_razmer').value;
   let ramka = document.getElementsByClassName('woocommerce-product-gallery__image');

   if(input == 'chernaya') {
     for(var i=0; i < input.length; i++) {
       ramka[i].style.border = '50px solid black';    
        ramka[i].style.boxShadow = 'none';
      }   
   } 
}

Cannot read property 'style' of undefined but styles are working

2 Answers2