skip to Main Content

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?

2

Answers


  1. 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';
    }   
    } 
    
    Login or Signup to reply.
  2. 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';
          }   
       } 
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search