Question 11617 in Shopify Question posted in
The Shopify help center can be found here.

How to get this.id on a for each function (Vanilla JS) – Shopify

Im making a function which one gets input checked on page loads, this have an unique id created by shopify, so i got a code in jquery which works fine, but im trying to get it to plain javascript (Vanilla) is anyone able to guide me 🙂

JQUERY version

(function() {
      $("#variantRadios input:checked").each(function() {
        console.log(this.id + " is checked")
      });
})();

enter image description here

Here is Vanilla JS code:

(function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach((checkVariant) => {
      console.log(this.id + " is checked")
    });
})();

enter image description here

Tags:

3

Answers


  1. 0

    Use what is passed to the foreach:

    (function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach((checkVariant) => {
      console.log(checkVariant.id + " is checked")
    });
})();
    Login or Signup to reply.
  2. 0

    The () => way (called "arrow function") prevents the value of this from changing. So, it does not change to become each element. See forEach docs, arrow function docs, and function binding (changing this)

    However, you don’t need to mess with this anyway. The forEach passes three arguments (you can use zero, one, two, or all three of them), which are: the element, the index, and the entire list.

    Again, see forEach docs.

    Example:

    (function () {
    const checkVariants = document.querySelectorAll("#variantRadios input:checked");
    checkVariants.forEach(
      // can also be just `(checkVariant)` as needed
      (checkVariant, index, allCheckVariants) => {
        console.log(checkVariant.id + " is checked")
    });
})();
    Login or Signup to reply.
  3. 0

    Get element id by id property and get if its selected by checked property of an element in forEach method

    (function () {
    const checkVariants = document.querySelectorAll('#variantRadios input:checked');
    checkVariants.forEach((checkVariant) => {
        console.log(`Id = ${checkVariant.id}, is checked = ${checkVariant.checked}`);
    });
})();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search