Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
Add the handler using the loop
We used the for of loop to output all of the collection elements to the console. Add the click handler to all buttons in the news story using the same method. Use a loop: for every iteration add the handler that is now in the loop variable to the element. As a result we have a universal script – the handler is added to every element in the collection regardless of how many of them there are.
For example:
let elements = document.querySelectorAll('p');
for (let element of elements) {
// Add a handler to all elements in order
element.onclick = function () {
console.log('You clicked on the paragraph!');
};
}Note that there is no magical connection between the name of the array elements and the variable element that each successive array element is stored in; we could have called it x6hghjuhb97. We simply chose the name element because that’s what it is, and good coders make sure that their code is easy for another team member to read and understand.
When the loop from the example is executed, handlers will be added to all paragraphs in the elements collection, and when you click on each of them, a message will be displayed in the console.
An event handler that displays tooltips on the news site has already been written. Transfer it inside the loop and replace the index call with the tooltipButton variable, which we are using in the loop.
// Before:
tooltipButtons[0].onclick = function () {
...
};
// After:
for (let tooltipButton of tooltipButtons) {
tooltipButton.onclick = function () {
...
};
}
The handler that we added to the second button will be removed. It is no longer needed. After that, make sure that when you click on each button a pop-up appears with a tooltip.
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">
<span class="header-logo">
<img src="img/main-logo.svg" width="67" height="29" alt="FlashNews! portal logo">
</span>
<button class="theme-button" type="button">Change the theme</button>
</div>
</header>
<main class="inner-news">
<div class="tooltip">
<span class="tooltip-text"></span>
<button class="button close-button" type="button"><span>Close</span></button>
</div>
<article class="container">
<h1 class="inner-heading">Augment your reality</h1>
<div class="news-full">
<img src="img/ar.jpg" alt="Person wearing virtual reality glasses">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">297</span></button>
<time datetime="2020-02-18">February 18, 2020</time>
</div>
<p>The editors of Flashnews! have given their subscribers the following gift: an <button class="tooltip-button" type="button" data-tooltip-text="This is for when you have Pokemons in the living room">augmented reality</button> app in which you can pet an <button class="tooltip-button" type="button" data-tooltip-text="Something in between a pig and a jerboa">aardvark</button>, grow a <button class="tooltip-button" type="button" data-tooltip-text="Beats me what that is, I'll Google it">dragon fruit</button> plant or talk with <button class="tooltip-button" type="button" data-tooltip-text="Only available to annual subscribers">Muffin</button>.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comments</h2>
<ol class="comment-list">
<li class="user-comment">I want that!!!</li>
<li class="user-comment">I tried it, and it's awesome!</li>
<li class="user-comment">If you wear a tinfoil hat, the app will stop working. Unsubscribe</li>
</ol>
<form action="https://echo.htmlacademy.ru/courses" method="post" class="comment-form">
<div class="comment-inner">
<label class="comment-label" for="comment-textarea">your comment</label>
<textarea class="comment-field comment-area" rows="3" placeholder="Comment" required id="comment-textarea"></textarea>
</div>
<button class="button submit-button" type="submit">Submit</button>
</form>
</section>
</main>
<footer class="page-footer">
<div class="container">
<p>© FlashNews!</p>
<span class="footer-logo">
<img src="img/white-logo.svg" alt="FlashNews! portal logo">
</span>
</div>
</footer>
<script src="themes.js"></script>
<script src="likes.js"></script>
<script src="comments.js"></script>
<script src="tooltip.js"></script>
</body>
</html>
/* Button text styles */
.tooltip-button {
cursor: pointer;
position: relative;
padding: 1px 8px;
border: none;
color: inherit;
font: inherit;
}
.tooltip-button::after {
position: absolute;
content: "";
top: 0;
right: 0;
width: 0;
height: 0;
border: 4px solid;
border-left-color: transparent;
border-bottom-color: transparent;
}
/* Tooltip styles */
@keyframes tooltip-opener {
0% {
transform: translate(50%) scaleX(0);
}
100% {
transform: translate(100%) scaleX(100%);
}
}
.tooltip {
z-index: 2;
display: none;
flex-direction: row-reverse;
position: fixed;
max-width: 256px;
right: 0;
top: 160px;
border-radius: 8px 0 0 8px;
}
.opened {
display: flex;
animation: tooltip-opener 150ms;
}
.tooltip-text {
display: flex;
align-items: center;
padding: 10px;
}
.close-button {
min-height: 64px;
display: flex;
justify-content: center;
align-items: center;
width: 30px;
margin: 0;
padding: 0;
border-radius: 8px 0 0 8px;
}
.close-button span {
display: inline-block;
vertical-align: middle;
transform: rotate(-90deg);
}
/* Comment entry block styles */
.comment-area {
height: unset;
resize: none;
margin-bottom: 10px;
padding-top: 4px;
padding-bottom: 4px;
line-height: 24px;
}
.text-counter {
display: inline-block;
vertical-align: baseline;
padding: 7px 0;
margin-right: auto;
}
.comment-form.warning .comment-label {
color: #f05b29;
}
.comment-form.warning .comment-area {
color: #f05b29;
border-color: #f05b29;
}
.comment-form.warning .comment-area:focus {
outline-color: #f05b29;
}
.comment-form.warning .char-counter {
color: #f05b29;
font-weight: bold;
}
.submit-button:disabled {
opacity: 0.25;
}
/* Color schemes */
.light-theme .tooltip {
background-color: #ffffff;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}
.light-theme .tooltip-button {
background-color: #f2f2f2;
}
.light-theme .tooltip-button:focus,
.light-theme .tooltip-button:hover {
background-color: #6653d9;
color: #ffffff;
outline-color: #b6aaff;
}
.tooltip-button:active {
opacity: 0.6;
}
.light-theme .tooltip-button::after {
border-right-color: #6653d9;
border-top-color: #6653d9;
}
.dark-theme .tooltip {
background-color: #2a2930;
box-shadow: 0 0 16px rgba(0, 0, 0, 1);
}
.dark-theme .tooltip-button {
background-color: #0a0910;
}
.dark-theme .tooltip-button:focus,
.dark-theme .tooltip-button:hover {
outline-color: #6653d9;
background-color: #b6aaff;
color: #17161a;
}
.dark-theme .tooltip-button::after {
border-right-color: #b6aaff;
border-top-color: #b6aaff;
}
let tooltip = document.querySelector('.tooltip');
let closeButton = document.querySelector('.close-button');
let tooltipButtons = document.querySelectorAll('.tooltip-button');
let tooltipText = document.querySelector('.tooltip-text');
tooltipButtons[0].onclick = function () {
tooltipText.textContent = tooltipButtons[0].dataset.tooltipText;
tooltip.classList.add('opened');
};
tooltipButtons[1].onclick = function () {
tooltipText.textContent = tooltipButtons[1].dataset.tooltipText;
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
for (let tooltipButton of tooltipButtons) {
console.log(tooltipButton);
}
let commentForm = document.querySelector('.comment-form');
let commentList = document.querySelector('.comment-list');
let commentField = document.querySelector('.comment-field');
commentForm.onsubmit = function (evt) {
evt.preventDefault();
let newComment = document.createElement('li');
newComment.classList.add('user-comment');
newComment.textContent = commentField.value;
commentField.value = '';
commentList.append(newComment);
};
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 heart = document.querySelector('.heart');
let likesNumber = document.querySelector('.likes-number');
heart.onclick = function () {
if (heart.classList.contains('added')) {
likesNumber.textContent--;
} else {
likesNumber.textContent++;
}
heart.classList.toggle('added');
};
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
- Remove all code on lines 11–14.
- Transfer all the code from lines 6–9 to inside the loop, and remove the text that has been output to the console.
- Replace
tooltipButtons[0]everywhere withtooltipButton. - Click on all four buttons in the news story. Notice how the tooltip now appears when you click on each button.
Comments