0 added
0 removed
Original
2026-01-01
Modified
2026-03-09
1
<p>We have almost finished setting up filtering on the news site: When a user selects a category from the list, only news from this category is displayed on the page. But if you select the “All News” option, then all the categories disappear.</p>
1
<p>We have almost finished setting up filtering on the news site: When a user selects a category from the list, only news from this category is displayed on the page. But if you select the “All News” option, then all the categories disappear.</p>
2
<p>Let’s figure out why this happens. Each news category has the same filter value. But there are only four categories, the filter has five possible values. If the “All News” option is selected, then the filter value becomes 'all'. There is no news on the page with this data-category attribute value. Therefore, checking for an inequality always returns true. As a result, the hidden class is added to all news items, and they disappear from the page.</p>
2
<p>Let’s figure out why this happens. Each news category has the same filter value. But there are only four categories, the filter has five possible values. If the “All News” option is selected, then the filter value becomes 'all'. There is no news on the page with this data-category attribute value. Therefore, checking for an inequality always returns true. As a result, the hidden class is added to all news items, and they disappear from the page.</p>
3
// When the filter value is 'all', the check always returns true if (article.dataset.category !== filter.value) { article.classList.add('hidden'); }<p>How can we tell JavaScript that if the “All News” option is selected, then it should not hide the news? Add another condition to the if statement: the filter value should not be equal to 'all'.</p>
3
// When the filter value is 'all', the check always returns true if (article.dataset.category !== filter.value) { article.classList.add('hidden'); }<p>How can we tell JavaScript that if the “All News” option is selected, then it should not hide the news? Add another condition to the if statement: the filter value should not be equal to 'all'.</p>
4
// If the category IS NOT equal to the filter AND the filter is NOT equal to "All News" if (article.dataset.category !== filter.value && filter.value !== 'all') { article.classList.add('hidden'); }<p>The double ampersand && is used in JavaScript to designate the<b>logical operator AND</b>. It allows you to combine two parts of the condition.</p>
4
// If the category IS NOT equal to the filter AND the filter is NOT equal to "All News" if (article.dataset.category !== filter.value && filter.value !== 'all') { article.classList.add('hidden'); }<p>The double ampersand && is used in JavaScript to designate the<b>logical operator AND</b>. It allows you to combine two parts of the condition.</p>
5
<p>Let’s take a look at how it works. The strict inequality operators in our condition compare values and return true orfalse. If at least one of the operators returns false, then thanks to the logical operator AND the condition will also be considered false as a whole:</p>
5
<p>Let’s take a look at how it works. The strict inequality operators in our condition compare values and return true orfalse. If at least one of the operators returns false, then thanks to the logical operator AND the condition will also be considered false as a whole:</p>
6
true && true; // Result: true true && false; // Result: false false && true; // Result: false false && false; // Result: false<p>As a result, the hidden class is added to the news story only if both checks for inequality return true.</p>
6
true && true; // Result: true true && false; // Result: false false && true; // Result: false false && false; // Result: false<p>As a result, the hidden class is added to the news story only if both checks for inequality return true.</p>
7
<p>Let’s refine our filtering. Add a check to the condition that checks whether the filter value is not strictly equal to 'all', and use the logical operator AND to combine the two parts of the condition. After that, make sure that everything works correctly.</p>
7
<p>Let’s refine our filtering. Add a check to the condition that checks whether the filter value is not strictly equal to 'all', and use the logical operator AND to combine the two parts of the condition. After that, make sure that everything works correctly.</p>
8
<p>Javascript also has the logical operator OR. It is indicated by two vertical bars and returns true if at least one of the operands returns true:</p>
8
<p>Javascript also has the logical operator OR. It is indicated by two vertical bars and returns true if at least one of the operands returns true:</p>
9
true || true; // Result: true true || false; // Result: true false || true; // Result: true false || false; // Result: false
9
true || true; // Result: true true || false; // Result: true false || true; // Result: true false || false; // Result: false