Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The oninput Event Handler
Meow! People talk too much, and the comment section should not be longer than the news story itself!
This is our new assignment from the boss. The commenting system that we created in the previous chapter turned out to be quite convenient for users. Perhaps too convenient. They now eagerly discuss new stories… and sometimes they get a little carried away. The boss wants the comments on the site to be no longer than 142 characters. The web designer added a counter to the comment form so that users could see how many characters they had already used. If the character limit is exceeded, then the comment “Submit” button should be locked, and the character counter and text in the input field will turn red.
We need to finish our script!
We already know how to get data from the input field, but only after the form has been submitted. Now we need to determine how the comment length can be measured before the form is sent. How can we accomplish that? We will use the oninput event handler. Instructions inside the oninput handler are executed every time the value in the input field changes. For example:
// Find the input field
let textarea = document.querySelector('textarea');
// Add the event handler
textarea.oninput = function () {
// Display data from the input field
console.log(textarea.value);
};Type the word “Muffin”, then remove the last character and take a look at the console:
M (String)
Mu (String)
Muf (String)
Muff (String)
Muf (String)
Notice how the text from the input field was displayed in the console with each change, including both when new characters were added and deleted.
Thanks to the oninput event handler, we can get the comment text before the user submits it. Let’s see how it works: add a handler to the comment input field and enter some text.
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">It can be healthy to go for a walk</h1>
<div class="news-full">
<img src="img/walk.jpg" alt="People go for walks.">
<div class="news-stats">
<button class="heart" type="button"><span class="likes-number">7</span></button>
<time datetime="2020-02-19">February 19, 2020</time>
</div>
<p>However, that might not be the case if you don't go for a stroll <button class="tooltip-button" type="button" data-tooltip-text="Or just don't go there">with those people</button>. Scientists from <button class="tooltip-button" type="button" data-tooltip-text="That's a very cool university">Harvard</button> have found that relationships with loved ones affect happiness more than intelligence, salary, or your number of <button class="tooltip-button" type="button" data-tooltip-text="Did YOU sign up for the newsletter?">followers</button>. It still remains <button class="tooltip-button" type="button" data-tooltip-text="More money is needed">unclear</button> how the number of <button class="tooltip-button" type="button" data-tooltip-text="The superior lifeform">kitties</button> affects your level of happiness.</p>
</div>
</article>
<section class="comment-feed container">
<h2>Comments</h2>
<ol class="comment-list">
<li class="user-comment">From the point of view of banal erudition, every individual whose cynical thinking creates associations with concepts of paradoxical illusions simply cannot but ignore the criteria of utopian subjectivity. And from the point of view of the value or content of this logical statement, it is determined by means of a purely negative predicate whether it adds anything to the entire body of knowledge. <br>
Immanuel Kant<br>
Do you think that you understand human nature better than Kant?</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>
<span class="text-counter"><span class="char-counter">0</span>/218 characters used</span>
<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');
closeButton.onclick = function () {
tooltip.classList.remove('opened');
};
for (let tooltipButton of tooltipButtons) {
tooltipButton.onclick = function () {
tooltipText.textContent = tooltipButton.dataset.tooltipText;
tooltip.classList.add('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);
};
// Add an event handler here
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 15 add the
oninputevent handler to thecommentFieldelement using thecommentField.oninput = function () { };instruction. - Inside the curly braces of the event handler output the
valueproperty of thecommentFieldelement to the console. - In the mini-browser start typing text in the input field. Three characters will suffice.
- Open the console. Note how the new message is displayed each time the text is changed in the input field.
Comments