Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript One Solution

Piotr Manczak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,367 Points
Posted by Piotr Manczak
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,367 Points

Logic behid?

I could not understand this logic so I have written something that works the same but my logic is less compact:

ul.addEventListener("change", (event) => {
    const type = event.target.dataset.urgency;
    const conflicting = document.querySelectorAll(`[data-urgency=${type}]`);
    console.log(conflicting);
    for(let i = 0; i < conflicting.length; i++){
        if(conflicting[i] !== event.target && event.target.checked){
            conflicting[i].disabled = true;
        } else {
            conflicting[i].disabled = false;
        }
    }
});

My variables are slightly different and attribite as well but at least I understand what is happening. Could someone elaborate about logic used in the eventListener in the One Solution example, please?

Piotr Manczak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,367 Points
Piotr Manczak
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,367 Points

I have come up with another way of writing it:

if(sameStyle[i] != checkedBox && checkedBox.checked == true){
    sameStyle[i].disabled = true;
} else {
    sameStyle[i].disabled = false;
}

I think this one works even better.

3 Answers

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

If you're able to refactor the code and it still works correctly, I'd take that as evidence that you understand the logic pretty well!

One small comment — you never need to compare a boolean with "true", just test it directly.
For example, checkedBox.checked == true is the same thing as just checkedBox.checked.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Glad to help. Remember to mark the question solved, and happy coding!

Piotr Manczak
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,367 Points
Piotr Manczak
.a{fill-rule:evenodd;}techdegree seal-36
Piotr Manczak
Front End Web Development Techdegree Graduate 29,367 Points

I finally got an understanding and came up with some functional programming just to avoid using a loop. It does not change outcome but look more stylish.

conflictingInputs.forEach(i => i.disabled = i != checked && checked.checked);