Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The onchange event handler
We learned to add the class only from a single category to news stories. To do this, we compared the data attribute value for each news story with the string that was manually written. But we need to compare it with the category that the user selected in the filter. That way the filtering will be performed automatically.
The filter on the main page is a dropdown list with news categories.
The user can select one of the proposed categories. The selected value is stored in the value property for the list itself.
// Find the dropdown list
let select = document.querySelector('select');
// Output the value to the console
console.log(select.value);
We need to obtain the filter value when the user selects a new category. To do this, use the onchange event handler. This event handler is triggered when the user selects a new value from the dropdown menu.
// Add the event handler
select.onchange = function () {
// Output the new value to the console
console.log(select.value);
};A filter is an element with the filter class on the news site. Find it, save it to the variable, and add the onchange event handler. After that, tell JavaScript to output the filter value to the console and select several categories from the list in order.
The onchange event handler can be used with various elements. For example, it is triggered when the user toggles the checkbox or radio buttons.
Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
<title>FlashNews!</title>
</head>
<body class="page light-theme">
<header class="page-header">
<div class="container">
<a class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo">
</a>
<a href="subscription.html" class="subscription-link">Subscription</a>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="index-main">
<div class="container">
<h1 class="visually-hidden">FlashNews news portal!</h1>
<div class="news-view">
<button class="row-view view-checked" type="button">Results list</button>
<button class="tile-view" type="button">Tile</button>
<select class="filter" name="news-filter">
<option value="IT">IT</option>
<option value="cats">Kitties</option>
<option value="games">Games</option>
<option value="HR">HR</option>
<option value="all" selected>All News</option>
</select>
</div>
<section class="news-list">
<h2 class="visually-hidden">All News</h2>
<article class="news-block" data-category="cats">
<img src="img/news-cat.jpg" alt="Cat eyes">
<div class="news-block-text">
<h3>Unique video!</h3>
<p>Discover the World Through the Eyes of Cats! Your life will never be the same…</p>
<span class="news-tag">#Kitties</span>
<time datetime="2020-03-24">March 24, 2020</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/walk.jpg" alt="People go for walks">
<div class="news-block-text">
<h3>It can be healthy to go for a walk</h3>
<p>But it might not be if you take a stroll with the wrong people…</p>
<span class="news-tag">#HR</span>
<time datetime="2020-03-19">February 19, 2020</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/ar.jpg" alt="Person wearing virtual reality glasses">
<div class="news-block-text">
<h3>Augment your reality</h3>
<p>The editors of Flashnews! have prepared a gift for their subscribers…</p>
<span class="news-tag">#Games</span>
<time datetime="2020-02-18">February 18, 2020</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/drone.jpg" alt="A small drone">
<div class="news-block-text">
<h3>Dronovirus</h3>
<p>The designers at the DogDrones.inc laboratory have assured that their drones cannot be carriers of dangerous
viruses…</p>
<span class="news-tag">#IT</span>
<time datetime="2019-12-22">December 22, 2019</time>
</div>
</article>
<article class="news-block" data-category="HR">
<img src="img/new-research.jpg" alt="A man looks at a board with cards">
<div class="news-block-text">
<h3>From the world of psychology</h3>
<p>Studies show that if you do more, you can actually get more done.</p>
<span class="news-tag">#HR</span>
<time datetime="2019-10-12">October 12, 2019</time>
</div>
</article>
<article class="news-block" data-category="games">
<img src="img/new-drone.jpg" alt="Quadcopter">
<div class="news-block-text">
<h3>A quadcopter is not just a fancy toy</h3>
<p>Controlling the quadcopter allows you to develop agility, spatial thinking, and the ability to climb trees…
</p>
<span class="news-tag">#Games</span>
<time datetime="2019-11-21">November 21, 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-loop.jpg" alt="Infinite loops">
<div class="news-block-text">
<h3>Infinite loops: It’s time to end them</h3>
<p>British scientists have discovered that the ability of software to function directly depends on the presence of infinite loops in it.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-16">October 16, 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/news-robot2.jpg" alt="A robot vacationing at a resort">
<div class="news-block-text">
<h3>What shocking news! It’s so scandalous! Such a sensation!</h3>
<p>It turns out that you don’t have to be a cat to start programming in JavaScript!</p>
<span class="news-tag">#Kitties</span>
<time datetime="2019-12-22">December 22, 2019</time>
</div>
</article>
<article class="news-block" data-category="IT">
<img src="img/new-graph.jpg" alt="New library">
<div class="news-block-text">
<h3>New graphics library</h3>
<p>Now you can create a dashboard in just a matter of seconds.</p>
<span class="news-tag">#IT</span>
<time datetime="2019-10-14">October 14, 2019</time>
</div>
</article>
<article class="news-block" data-category="cats">
<img src="img/new-cat.jpg" alt="Cat at a laptop">
<div class="news-block-text">
<h3>This just in: SHOCKING NEWS! Secret photos from the cat nursery</h3>
<p>No one expected that THIS was going on behind the closed doors…</p>
<span class="news-tag">#Kitties</span>
<time datetime="2019-10-13">October 13, 2019</time>
</div>
</article>
</section>
</div>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<a class="footer-logo">
<img src="img/white-logo.svg" alt="FlashNews! portal logo">
</a>
</div>
</footer>
<button class="up-button" type="button">
↑
<span class="visually-hidden">Up</span>
</button>
<script src="script.js"></script>
<script src="themes.js"></script>
<script src="up-button.js"></script>
<script src="filter.js"></script>
</body>
</html>
html {
scroll-behavior: smooth;
}
.hidden {
display: none;
}
.subscription-link {
position: relative;
padding-top: 8px;
padding-right: 2px;
padding-bottom: 6px;
padding-left: 26px;
margin: auto 4%;
}
.subscription-link::before {
position: absolute;
content: "";
width: 18px;
height: 12px;
top: 9px;
left: 2px;
}
.subscription-link:hover {
padding-bottom: 4px;
border-bottom: 2px solid;
}
.subscription-link:active {
opacity: 0.6;
}
.light-theme .subscription-link {
color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .subscription-link:hover {
border-color: #6653d9;
}
.light-theme .subscription-link::before {
background-image: url("img/letter-light.svg");
}
.dark-theme .subscription-link {
color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .subscription-link:hover {
border-color: #9484f2;
}
.dark-theme .subscription-link::before {
background-image: url("img/letter-dark.svg");
}
.up-button {
position: fixed;
z-index: 1;
padding: 0;
bottom: 75px;
right: 20px;
width: 64px;
height: 64px;
font-size: 36px;
font-weight: bold;
text-align: center;
vertical-align: middle;
border: 5px solid;
border-radius: 50%;
display: none;
cursor: pointer;
}
.light-theme .up-button {
color: #6653d9;
background-color: rgba(255, 255, 255, 0.8);
border-color: #6653d9;
outline-color: #b6aaff;
}
.light-theme .up-button:hover {
color: #473c8d;
background-color: rgba(255, 255, 255, 0.8);
border-color: #473c8d;
}
.dark-theme .up-button {
color: #9484f2;
background-color: rgba(10, 9, 16, 0.6);
border-color: #9484f2;
outline-color: #6653d9;
}
.dark-theme .up-button:hover {
color: #6653d9;
background-color: rgba(10, 9, 16, 0.6);
border-color: #6653d9;
}
.shown {
display: inline-block;
}
/* Filter styles */
.filter {
display: flex;
padding: 7px 22px 7px 12px;
box-sizing: border-box;
margin: 0 0 0 auto;
font-size: inherit;
border: none;
border-radius: 2px;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-repeat: no-repeat, repeat;
background-position: right 8px top 50%;
background-size: 8px auto;
}
.filter::-ms-expand {
display: none;
}
.filter:focus {
outline-offset: 0;
}
.light-theme .filter {
color: #ffffff;
background-color: #6653d9;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
.light-theme .filter:hover {
background-color: #473c8d;
}
.light-theme .filter:focus {
outline-color: #b6aaff;
}
.dark-theme .filter {
color: #17161a;
background-color: #9484f2;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2317161a%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
}
.dark-theme .filter:hover {
background-color: #6653d9;
}
.dark-theme .filter:focus {
outline-color: #6653d9;
}
/* News tags styles */
.news-tag {
padding: 4px 8px;
margin: 0 auto 0 0;
border-radius: 12px;
}
.list-tiles-view .news-tag {
margin-bottom: 4px;
}
.light-theme .news-tag {
color: #aaaaaa;
background-color: #f2f2f2;
}
.dark-theme .news-tag {
color: #888888;
background-color: #0a0910;
}
/* News block highlighting */
.news-block.highlight {
padding-top: 6px;
padding-right: 6px;
padding-bottom: 10px;
padding-left: 6px;
border: 6px solid;
}
.light-theme .news-block.highlight {
border-color: #ff9900;
}
.dark-theme .news-block.highlight {
border-color: #e58a00;
}
.list-tiles-view .highlight img {
width: calc(100% + 12px);
top: -6px;
left: -6px;
height: 140px;
}
let articles = document.querySelectorAll('.news-block');
// Declare a variable here
for (let article of articles) {
if (article.dataset.category === 'cats') {
article.classList.add('highlight');
}
}
// Add an event handler here
let rowViewButton = document.querySelector('.row-view');
let tileViewButton = document.querySelector('.tile-view');
let newsList = document.querySelector('.news-list');
rowViewButton.onclick = function () {
rowViewButton.classList.add('view-checked');
tileViewButton.classList.remove('view-checked');
newsList.classList.remove('list-tiles-view');
};
tileViewButton.onclick = function () {
rowViewButton.classList.remove('view-checked');
tileViewButton.classList.add('view-checked');
newsList.classList.add('list-tiles-view');
};
let page = document.querySelector('.page');
let themeButton = document.querySelector('.theme-button');
themeButton.onclick = function () {
page.classList.toggle('light-theme');
page.classList.toggle('dark-theme');
};
let upButton = document.querySelector('.up-button');
window.onscroll = function () {
if (window.pageYOffset > 200) {
upButton.classList.add('shown');
} else {
upButton.classList.remove('shown');
}
};
upButton.onclick = function () {
window.scrollTo(0, 0);
};
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
100%
Console
- On line 2, declare a variable
filterand assign the element with the classfilterto it. - After the loop, on line 10, add the
onchangeevent handler to thefilterelement. - Inside the
onchangeevent handler output thevalueproperty from thefilterelement to the console. - In the mini-browser, select “Games” and then “All News” in the dropdown list.
- Open the console. Please note that the filter values that match the selected categories are displayed.
Comments