CUTCODEDOWN
Minimalist Semantic Markup

Welcome Guest
Please Login or Register

If you have registered but not recieved your activation e-mail in a reasonable amount of time, or have issues with using the registration form, please use our Contact Form for assistance. Include both your username and the e-mail you tried to register with.

Author Topic: Jason's dom.lib.js class  (Read 322 times)

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Jason's dom.lib.js class
« on: 5 Feb 2023, 05:46:18 pm »
Using Jason's dom.lib.js to make a switch in js. How do I setup a click event handler for it - I just need to get the checked state after it's changed:

Code: [Select]
const addSelectAll = (element) => {
    const theSwitch = element.__make("label", {placement : "afterbegin"},
        ["input", {type: "checkbox", className : "switch"},
            ["ins", {hidden : true, ariaHidden: true}],
            ["span", "Select All"]
        ],
    );
    theSwitch.addEventListener("click", e => {
       console.log("switch clicked", e);
    });
}

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Jason's dom.lib.js class
« Reply #1 on: 6 Feb 2023, 03:24:44 pm »
You've got two mistakes there. First off you would want to trap the "change" event so you get it after it has... well, changed. "input" might be a better event though.

Second you're trapping the label, not the input. The input is what changes, not the label.

And really you don't need the variable for this either.

Code: [Select]
onst addSelectAll = (element) => {
element.__make(
"label",
{ placement : "afterbegin" },
[ "input",
{
className : "switch",
type : "checkbox",
onchange : (e) => {
console.log(e.currentTarget.checked);
}
}
],
["ins", { hidden : true } ],
["span", "Select All"]
);
}

normally I say don't use the "on" attributes, but when you assign it here you're not making it reliant on a global function, and you literally just created the element so you're not overwriting other events.


We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Jason's dom.lib.js class
« Reply #2 on: 6 Feb 2023, 03:30:51 pm »
Oh and guessing wildly on what you're trying to do :D

Code: [Select]
onchange : (e) => {
const fieldset = e.currentTarget.closest("fieldset");
if (fieldset) {
const checkboxes = fieldset.querySelectorAll("input[type=checkbox]");
for (const checkbox of checkboxes) {
checkbox.checked = e.currentTarget.checked;
}
}
}

That assumes the outer "element" is a fieldset, and turns it into a toggle that turns them all checkboxes on/off.
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

AndrewTraub

  • Jr. Member
  • **
  • Posts: 80
  • Karma: +0/-0
Re: Jason's dom.lib.js class
« Reply #3 on: 7 Feb 2023, 08:50:37 am »
Thanks!  I modified it a little to be like your form disable and enable functions:
Code: [Select]
onchange : (e) => {
                    const fieldset = e.currentTarget.closest("fieldset");
                    if (fieldset) {
                        const checkboxes = fieldset.querySelectorAll("input[type=checkbox]");
                        for (const checkbox of checkboxes) {
                            if(e.currentTarget.checked) {
                                if (checkbox.checked) checkbox.classList.add("wasChecked");
                                checkbox.checked = true;
                            } else {
                                if (checkbox.classList.contains("wasChecked"))
                                    checkbox.classList.remove("wasChecked"); //remove marker but keep checked
                                else
                                    checkbox.checked = false;
                            }
                        }
                    } //fieldset
                }

Jason Knight

  • Administrator
  • Hero Member
  • *****
  • Posts: 1049
  • Karma: +188/-1
    • CutCodeDown -- Minimalist Semantic Markup
Re: Jason's dom.lib.js class
« Reply #4 on: 10 Feb 2023, 05:23:13 am »
No clue what you think you need a class for there. And really an if statement inside the loop that doesn't change in value is just bad coding.

What's the markup and/or CSS you're manipulating here. Looks like you might be using a class where you should be using :checked and maybe a sibling selector in the CSS.

Wait, are you using a class to store what the original state was so unchecking does a restore?
« Last Edit: 10 Feb 2023, 05:25:25 am by Jason Knight »
We are all, we are all, we are all FRIENDS! For today we're all brothers, tonight we're all friends. Our moment of peace in a war that never ends.

 

SMF spam blocked by CleanTalk

Advertisement