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 trialPiotr Manczak
Front End Web Development Techdegree Graduate 29,277 PointsLogic 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?
3 Answers
Steven Parker
231,198 PointsIf 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
.
Piotr Manczak
Front End Web Development Techdegree Graduate 29,277 Points...and it looks much better(your version). Thanks Steven.
Steven Parker
231,198 PointsGlad to help. Remember to mark the question solved, and happy coding!
Piotr Manczak
Front End Web Development Techdegree Graduate 29,277 PointsI 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);
Piotr Manczak
Front End Web Development Techdegree Graduate 29,277 PointsPiotr Manczak
Front End Web Development Techdegree Graduate 29,277 PointsI have come up with another way of writing it:
I think this one works even better.