0
260
ViewsHow to get this.id on a for each function (Vanilla JS)
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")
});
})();
Here is Vanilla JS code:
(function () {
const checkVariants = document.querySelectorAll("#variantRadios input:checked");
checkVariants.forEach((checkVariant) => {
console.log(this.id + " is checked")
});
})();
3 answers
Answer question0
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")
});
})();
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")
});
})();
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}`);
});
})();