Woocommerce Question posted in
The official Woocommerce documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    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. 0

    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