Reduced a size of a code for a mindflow. Removed check for empty name property because there's no plans to add more buttons. Click handler function defined outside to eliminate definition of many same functions. Used for ... of instead of traditional for for code reduce and it doesn't drastically affect performance actually. Especially at such low array sizes. Used force arg of a toggle method to reduce code.

This commit is contained in:
Alexander Andreev 2022-10-24 23:06:24 +04:00
parent b40dfe2d0d
commit 0f9c658d10
Signed by: Arav
GPG Key ID: 0388CC8FAA51063F

View File

@ -1,13 +1,12 @@
const buttons = document.getElementsByTagName("button");
const articles = document.getElementsByTagName("article");
document.getElementById("filter").classList.remove("hidden");
for (let i = 0; i < buttons.length; ++i)
if (buttons[i].name !== "")
buttons[i].addEventListener("click", e => {
for (let j = 0; j < articles.length; ++j)
if (articles[j].id.startsWith(e.target.name) || e.target.name === "all")
articles[j].classList.remove("hidden");
else
articles[j].classList.add("hidden"); });
function filter(e) {
for (const a of articles)
a.classList.toggle("hidden",
!(e.target.name === "all" || a.id.startsWith(e.target.name)));
}
for (const b of document.getElementsByTagName("button"))
b.addEventListener("click", filter);