Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The querySelectorAll Method and Collections
We discovered that a pop-up appears when you click on the first button, but when you click on the second, nothing happens. The pop-up closes normally, but the tooltip itself is missing from it. Let’s figure out what’s going on!
Why isn’t the second button working? The thing is that the querySelector method returns or rather transmits information about only one element. If a selector is specified in parentheses that matches several elements on the page, then only the first of them is returned. What should you do if you need to find all of the elements? Use the querySelectorAll method:
// Finds all paragraphs on the page
let elements = document. querySelectorAll ('p');The querySelectorAll method finds all the elements on the page that match the specified selector, and it returns a set of these elements, namely a collection.
A collection, like a regular element, can be saved in a variable. The simplest method of finding out which elements are in the collection is to output it to the console:
// Displays the collection in the console.
console.log(elements);In our console, the collection looks like a list in which the elements are listed in comma-separated fashion. The entire list is enclosed in square brackets, and only the element tag and, for example, class are specified for the elements:
[p.card__text, p, p]
To display the elements in the same way as in the markup, you need to expand the collection by clicking on the triangle arrow on the left:
[p.card__text, p, p, p]
[p.card__text, p, p]
<p class="card__text">Let’s make ice cream!</p>
<p>St. Petersburg</p>
<p>mail@htmlacademy.ru</p>
The word-buttons on our website are elements with the tooltip-button class. Tell JavaScript to find all of them and to display the obtained collection in the console.
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">Dronovirus</h1>
<div class="news-full">
<img src="img/drone.jpg" alt="A small drone">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">50</span></button>
<time datetime="2019-12-22">December 22, 2019</time>
</div>
<p>The designers from the <button class="tooltip-button" type="button" data-tooltip-text="That's not a laboratory that inspires confidence">DogDrones.inc</button> laboratory have assured the public that their drones cannot be carriers of dangerous viruses, since their programming did not include this ability. <button class="tooltip-button" type="button" data-tooltip-text="This is not quite accurate – Legal disclaimer">Frankly speaking</button>. In fact, the laboratory's drones cannot communicate any diseases at all.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comments</h2>
<ol class="comment-list">
<li class="user-comment">But what can you tell us about the Muffinfleet drones? This is not advertising.</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 tooltipButton = document.querySelector('.tooltip-button');
let closeButton = document.querySelector('.close-button');
// Declare a variable here
tooltipButton.onclick = function () {
tooltip.classList.add('opened');
};
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
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
- On line 4 declare a variable
tooltipButtonsand write the collection that was created using the instructiondocument.querySelectorAll('.tooltip-button')to it. - On the next line output the
tooltipButtonsvariable to the console. - Open the console. To see which elements are contained in the collection, expand it by click on the triangle to the left of the list of elements.
Comments