Thursday, September 14, 2023
HomeCSSjavascript - What is incorrect with the Javascritpt?

javascript – What is incorrect with the Javascritpt?


I made a button-like food selection inside an area and also the only issue with it is that information classifications do not transform after clicking a switch. What is incorrect with the Javascript? I have a comparable food selection with switches as opposed to h4 and also nearly the exact same Javascript for it and also it functions. Many thanks ahead of time.

HTML

 << div course=" filter_buttons2">
<> < h4 course=" active3" data-name=" all2">> Pokaż wszystkie<.
<< h4 data-name=" songs">> Muzyka< < h4 data-name=" movies">> Filmy< < h4 data-name=" digital photography">> Fotografia< < h4 data-name=" copywriting">> Copywriting< .
<< div course=" filterable_works">
<> < div course=" job" data-name=" songs">
<> < p>> ddddd<.
<.

<< div course=" job" data-name=" movies">
<> < p>> gfjdfgjfg<.
<.

<< div course=" job" data-name=" digital photography">
<> < p>> dsfsfgsghdf<.
<.

<< div course=" job" data-name=" copywriting">
<> < p>> daaaasadd<.
<.
<.

Javascript

 const filterButtons2 = document.querySelectorAll(". filter_buttons2 h4");
const filterableWorks = document.querySelectorAll(". filterable_works. job");

const filterWorks = (e) => > {
document.querySelector(". active3"). classList.remove(" active3");
e.target.classList.add(" active3");

filterableWorks.forEach(( job) => > {
work.classList.add(" conceal");
if (.
work.dataset.name === e.target.dataset.name||
e.target.dataset.name === "all2".
) {
work.classList.remove(" conceal");
}
} );
};

filterButtons2.forEach(( h4) => > h4.addEventListener(" click", filterWorks));

CSS

 filter_buttons2 {
display screen: flex;
align-items: facility;
flex-wrap: cover;.
space: 10px;.
}

h4 {
cushioning: 10px 20px;.
font-size: 18px;.
history: #ffffff;.
boundary: none;.
border-radius: 6px;.
arrow: reminder;.
box-shadow: 0 0 10px # 000000;.
}

h4.active3 {
cushioning: 10px 20px;.
font-size: 18px;.
history: # 670101;.
shade: #ffffff;.
boundary: none;.
border-radius: 6px;.
arrow: reminder;.
box-shadow: 0 0 10px # 000000;.
}

. filterable_works {
display screen: components;.
margin-top: 25px;.
space: 20px;.
flex-wrap: cover;.
}

. job {
setting: loved one;.
max-width: 1300px;.
size: 100%;.
cushioning: 20px;.
margin: 0;.
}

I request for aid with the Javascript. I am a noob with it. Probably there are mistakes in the HTML or CMS codes.

RELATED ARTICLES

Most Popular

Recent Comments