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

Woocommerce – Can this Javascript be rewritten to work for a class instead of an id?

I have a system where I’m trying to get images onclick to change the selection of a drop down select menu. You click the picture of blue, drop drown reads “blue”, etc. I found a script (though I believe it’s kind of old) to do this. However, it only works with ID’s. I cannot assign an ID to my select because it’s part of a WordPress plugin. So, is there any way to rework this Javascript by using a class (there would only ever be one per page, so no multiple ID’s would happen) or by the “name” attribute?

Here’s the code I’m working with: 

function SelectADropdownItem(id, val) {
  var d = document.getElementById(id);
  for (var i = 0; i < d.length; i++) {
    if (d[i].value == val) {
      d[i].selected = true;
    } else {
      d[i].selected = false;
    }
  }
}
<div class="woocommerce-product-details__short-description">
  <span style="font-family: 'Montserrat', sans-serif; font-size: 16px; color: #574f4b; font-weight:700;">Finish</span>

  <div style="width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">

    <img onclick="SelectADropdownItem('design-dropdown','0109-cream')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0109-Cream.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0109 Cream">

    <img onclick="SelectADropdownItem('design-dropdown','0209-honey')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0209-Honey.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0209 Honey">

    <img onclick="SelectADropdownItem('design-dropdown','0309-walnut')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0309-Walnut.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0309 Walnut">

    <img onclick="SelectADropdownItem('design-dropdown','0409-spice')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0409-Spice.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0409 Spice">

    <img onclick="SelectADropdownItem('design-dropdown','0509-english-chestnut')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0509-English-Chestnut.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0509 English Chestnut">

    <img onclick="SelectADropdownItem('design-dropdown','0609-nutwood')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0609-Nutwood.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0609 Nutwood">

    <img onclick="SelectADropdownItem('design-dropdown','0709-cherrywood')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0709-Cherrywood.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0709 Cherrywood">

    <img onclick="SelectADropdownItem('design-dropdown','0809-mahogany')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0809-Mahogany.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0809 Mahogany">

    <img onclick="SelectADropdownItem('design-dropdown','0909-coffee')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0909-Coffee.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0909 Coffee">

    <img onclick="SelectADropdownItem('design-dropdown','1009-empire')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1009-Empire.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1009 Empire">

    <img onclick="SelectADropdownItem('design-dropdown','1109-dark-chocolate')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1109-Dark-Chocolate.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1109 Dark Chocolate">

    <img onclick="SelectADropdownItem('design-dropdown','1209-black')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1209-Black.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1209 Black">

    <img onclick="SelectADropdownItem('design-dropdown','1309-light-oak')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1309-Light-Oak.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1309 Light Oak">

    <img onclick="SelectADropdownItem('design-dropdown','1409-oak')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1409-Oak.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1409 Oak">

    <img onclick="SelectADropdownItem('design-dropdown','1612-montana-walnut')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1612-Montana-Walnut.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1612 Montana Walnut">

    <img onclick="SelectADropdownItem('design-dropdown','1712-new-age-oak')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1712-New-Age-Oak.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1712 New Age Oak">

    <img onclick="SelectADropdownItem('design-dropdown','1812-fonthill-pear')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1812-Fonthill-Pear.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1812 Fonthill Pear">

    <img onclick="SelectADropdownItem('design-dropdown','1912-figured-mohogany')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/1912-Figured-Mahogany.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="1912 Figured Mohogany">

    <img onclick="SelectADropdownItem('design-dropdown','2012-kensington-maple')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/2012-Kensington-Maple.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="2012 Kensington Maple">

    <img onclick="SelectADropdownItem('design-dropdown','2112-solar-oak')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/2112-Solar-Oak.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="2112 Solar Oak">

    <img onclick="SelectADropdownItem('design-dropdown','0102-aureolin-yellow')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0102-aureolin-yellow.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0102 Aureolin Yellow">

    <img onclick="SelectADropdownItem('design-dropdown','0103-piano-key-white')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0103-piano-key-white.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0103 Piano Key White">

    <img onclick="SelectADropdownItem('design-dropdown','0104-carmine-red')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0104-carmine-red.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0104 Carmine Red">

    <img onclick="SelectADropdownItem('design-dropdown','0106-zaffre-blue')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0106-zaffre-blue.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0106 Zaffre Blue">

    <img onclick="SelectADropdownItem('design-dropdown','0107-tea-rose-orange')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0107-tea-rose-orange.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0107 Tea Rose Orange">

    <img onclick="SelectADropdownItem('design-dropdown','0108-mantis-green')" src="http://www.chervan.com/test/wp-content/uploads/2019/08/0108-mantis-green.jpg" style="width:8%; margin:5px; cursor:pointer;" alt="0108 Mantis Green">

  </div>
</div>


<select name="select-5d67f40f33032" id="design-dropdown" class="finishes-dropdown ">
  <option value="">None</option>
  <option value="0109-cream">0109 Cream</option>
  <option value="0209-honey">0209 Honey</option>
  <option value="0309-walnut">0309 Walnut</option>
  <option value="0409-spice">0409 Spice</option>
  <option value="0509-english-chestnut">0509 English Chestnut</option>
  <option value="0609-nutwood">0609 Nutwood</option>
  <option value="0709-cherrywood">0709 Cherrywood</option>
  <option value="0809-mahogany">0809 Mahogany</option>
  <option value="0909-coffee">0909 Coffee</option>
  <option value="1009-empire">1009 Empire</option>
  <option value="1109-dark-chocolate">1109 Dark Chocolate</option>
  <option value="1209-black">1209 Black</option>
  <option value="1309-light-oak">1309 Light Oak</option>
  <option value="1409-oak">1409 Oak</option>
  <option value="1612-montana-walnut">1612 Montana Walnut</option>
  <option value="1712-new-age-oak">1712 New Age Oak</option>
  <option value="1812-fonthill-pear">1812 Fonthill Pear</option>
  <option value="1912-figured-mohogany">1912 Figured Mohogany</option>
  <option value="2012-kensington-maple">2012 Kensington Maple</option>
  <option value="2112-solar-oak">2112 Solar Oak</option>
  <option value="0102-aureolin-yellow">0102 Aureolin Yellow</option>
  <option value="0103-piano-key-white">0103 Piano Key White</option>
  <option value="0104-carmine-red">0104 Carmine Red</option>
  <option value="0106-zaffre-blue">0106 Zaffre Blue</option>
  <option value="0107-tea-rose-orange">0107 Tea Rose Orange</option>
  <option value="0108-mantis-green">0108 Mantis Green</option>
</select>

Here’s a simple fiddle of what I’m trying to do here:
https://jsfiddle.net/7p8Ljz2b

Any help is appreciated.

I’ve tried scripts to add an ID to the class, none of them are working for me.

function myFunction() {
  document.getElementsByClassName("finishes-dropdown")[0].setAttribute("id", "design-dropdown"); 
}

I expect to be able to use this generated select with this script. Right now it’s not working because I cannot assign an ID to it.

Tags:

4

Answers


  1. 0 
    [...document.getElementsByClassName("myclass")].forEach(
  (element, index, array) => {
    element.addEventListener('click', function(){//put here the logic for after click
   })
  }
);

    You can do something like this with ES6. Assign on all selects a class, transform it to an real array with spread operator. Loop over it with forEach and add an eventlistener for all the select options. Done! Don’t forget to remove all inline click functions.

    https://jsfiddle.net/4h5vwrg2/

    Simple jsfiddle added to visualize.

    Login or Signup to reply.
  2. 0

    getElementsByClassName returns a Collection of Elements and not a single Element.
    So you must loop over that Collection

    for (var d of ds) {
  // ...
}

    function SelectADropdownItem(className, val) {
  var ds = document.getElementsByClassName(className);
  for (var d of ds) {
    for (var i = 0; i < d.length; i++) {
      if (d[i].value == val) {
        d[i].selected = true;
      } else {
        d[i].selected = false;
      }
    }
  }
}
    <div class="woocommerce-product-details__short-description">
  <span style="font-family: 'Montserrat', sans-serif; font-size: 16px; color: #574f4b; font-weight:700;">Finish</span>

  <div style="width:100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0109-cream')" src="https://picsum.photos/id/1/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0109 Cream">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0209-honey')" src="https://picsum.photos/id/2/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0209 Honey">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0309-walnut')" src="https://picsum.photos/id/3/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0309 Walnut">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0409-spice')" src="https://picsum.photos/id/4/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0409 Spice">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0509-english-chestnut')" src="https://picsum.photos/id/5/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0509 English Chestnut">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0609-nutwood')" src="https://picsum.photos/id/6/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0609 Nutwood">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0709-cherrywood')" src="https://picsum.photos/id/7/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0709 Cherrywood">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0809-mahogany')" src="https://picsum.photos/id/8/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0809 Mahogany">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0909-coffee')" src="https://picsum.photos/id/9/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0909 Coffee">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1009-empire')" src="https://picsum.photos/id/10/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1009 Empire">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1109-dark-chocolate')" src="https://picsum.photos/id/11/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1109 Dark Chocolate">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1209-black')" src="https://picsum.photos/id/12/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1209 Black">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1309-light-oak')" src="https://picsum.photos/id/13/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1309 Light Oak">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1409-oak')" src="https://picsum.photos/id/14/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1409 Oak">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1612-montana-walnut')" src="https://picsum.photos/id/15/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1612 Montana Walnut">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1712-new-age-oak')" src="https://picsum.photos/id/16/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1712 New Age Oak">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1812-fonthill-pear')" src="https://picsum.photos/id/17/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1812 Fonthill Pear">

    <img onclick="SelectADropdownItem('finishes-dropdown ','1912-figured-mohogany')" src="https://picsum.photos/id/18/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="1912 Figured Mohogany">

    <img onclick="SelectADropdownItem('finishes-dropdown ','2012-kensington-maple')" src="https://picsum.photos/id/19/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="2012 Kensington Maple">

    <img onclick="SelectADropdownItem('finishes-dropdown ','2112-solar-oak')" src="https://picsum.photos/id/20/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="2112 Solar Oak">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0102-aureolin-yellow')" src="https://picsum.photos/id/21/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0102 Aureolin Yellow">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0103-piano-key-white')" src="https://picsum.photos/id/22/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0103 Piano Key White">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0104-carmine-red')" src="https://picsum.photos/id/23/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0104 Carmine Red">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0106-zaffre-blue')" src="https://picsum.photos/id/24/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0106 Zaffre Blue">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0107-tea-rose-orange')" src="https://picsum.photos/id/25/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0107 Tea Rose Orange">

    <img onclick="SelectADropdownItem('finishes-dropdown ','0108-mantis-green')" src="https://picsum.photos/id/26/50/50" style="width:8%; margin:5px; cursor:pointer;" alt="0108 Mantis Green">

  </div>
</div>


<select name="select-5d67f40f33032" class="finishes-dropdown ">
  <option value="">None</option>
  <option value="0109-cream">0109 Cream</option>
  <option value="0209-honey">0209 Honey</option>
  <option value="0309-walnut">0309 Walnut</option>
  <option value="0409-spice">0409 Spice</option>
  <option value="0509-english-chestnut">0509 English Chestnut</option>
  <option value="0609-nutwood">0609 Nutwood</option>
  <option value="0709-cherrywood">0709 Cherrywood</option>
  <option value="0809-mahogany">0809 Mahogany</option>
  <option value="0909-coffee">0909 Coffee</option>
  <option value="1009-empire">1009 Empire</option>
  <option value="1109-dark-chocolate">1109 Dark Chocolate</option>
  <option value="1209-black">1209 Black</option>
  <option value="1309-light-oak">1309 Light Oak</option>
  <option value="1409-oak">1409 Oak</option>
  <option value="1612-montana-walnut">1612 Montana Walnut</option>
  <option value="1712-new-age-oak">1712 New Age Oak</option>
  <option value="1812-fonthill-pear">1812 Fonthill Pear</option>
  <option value="1912-figured-mohogany">1912 Figured Mohogany</option>
  <option value="2012-kensington-maple">2012 Kensington Maple</option>
  <option value="2112-solar-oak">2112 Solar Oak</option>
  <option value="0102-aureolin-yellow">0102 Aureolin Yellow</option>
  <option value="0103-piano-key-white">0103 Piano Key White</option>
  <option value="0104-carmine-red">0104 Carmine Red</option>
  <option value="0106-zaffre-blue">0106 Zaffre Blue</option>
  <option value="0107-tea-rose-orange">0107 Tea Rose Orange</option>
  <option value="0108-mantis-green">0108 Mantis Green</option>
</select>

    It is better to use addEventListener instead of onclick attribute

    function SelectADropdownItem(className, val) {
  var ds = document.getElementsByClassName(className);
  for (var d of ds) {
    for (var i = 0; i < d.length; i++) {
      if (d[i].value == val) {
        d[i].selected = true;
      } else {
        d[i].selected = false;
      }
    }
  }
}

document.addEventListener('click', function(e) {
  var v;
  if (v = e.target.dataset.value) {
    SelectADropdownItem('finishes-dropdown', v)
  }
})
    .list {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

img {
  width: 8%;
  margin: 5px;
  cursor: pointer
}
    <div class="list">

  <img data-value="0109-cream" src="https://picsum.photos/id/1/50/50" alt="0109 Cream">

  <img data-value="0209-honey" src="https://picsum.photos/id/2/50/50" alt="0209 Honey">

  <img data-value="0309-walnut" src="https://picsum.photos/id/3/50/50" alt="0309 Walnut">

  <img data-value="0409-spice" src="https://picsum.photos/id/4/50/50" alt="0409 Spice">

  <img data-value="0509-english-chestnut" src="https://picsum.photos/id/5/50/50" alt="0509 English Chestnut">

  <img data-value="0609-nutwood" src="https://picsum.photos/id/6/50/50" alt="0609 Nutwood">

  <img data-value="0709-cherrywood" src="https://picsum.photos/id/7/50/50" alt="0709 Cherrywood">

  <img data-value="0809-mahogany" src="https://picsum.photos/id/8/50/50" alt="0809 Mahogany">

  <img data-value="0909-coffee" src="https://picsum.photos/id/9/50/50" alt="0909 Coffee">

  <img data-value="1009-empire" src="https://picsum.photos/id/10/50/50" alt="1009 Empire">


</div>


<select name="select-5d67f40f33032" class="finishes-dropdown ">
  <option value="">None</option>
  <option value="0109-cream">0109 Cream</option>
  <option value="0209-honey">0209 Honey</option>
  <option value="0309-walnut">0309 Walnut</option>
  <option value="0409-spice">0409 Spice</option>
  <option value="0509-english-chestnut">0509 English Chestnut</option>
  <option value="0609-nutwood">0609 Nutwood</option>
  <option value="0709-cherrywood">0709 Cherrywood</option>
  <option value="0809-mahogany">0809 Mahogany</option>
  <option value="0909-coffee">0909 Coffee</option>
  <option value="1009-empire">1009 Empire</option>
</select>
    Login or Signup to reply.
  3. 0

    Your issue has nothing to do about setting an id. It is what you are selecting and looping over. You are selecting the select element. You then loop over the select element like it is multiple things. Some reason you think you are looping over the options, you are not.

    function SelectADropdownItem(id, val) {
  var d = document.getElementById(id);  <-- select element
  for (var i = 0; i < d.length; i++) { <-- looping over select, not its options

    There is no need to loop over to select it unless you are doing a multiple select (which is not seen in your code). So just set the value.

    function SelectADropdownItem (id, val) {
  var mySelect = document.getElementById(id);
  mySelect.value = value;
}
    Login or Signup to reply.
  4. 0

    Assign the id to the dropdown on document ready

    document.addEventListener('DOMContentLoaded', function(){
    document.getElementsByClassName("finishes-dropdown")[0].id = "design-dropdown";
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search