Let's have paragraphs:
<p>aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>
<p>eee</p>
Let's make it so that when you click on each
paragraph, its ordinal number in the list of
paragraphs is written at the end of it. Let's
solve the problem through Map
.
Let's get started. First, let's get our paragraphs into a variable:
let elems = document.querySelectorAll('p');
Let's create a new Map
collection:
let map = new Map;
Fill in our collection so that the keys are our paragraphs, and their values are ordinal numbers:
let i = 1;
for (let elem of elems) {
map.set(elem, i++);
}
Let's go through the paragraphs in a loop and hang a click handler on them:
for (let elem of elems) {
elem.addEventListener('click', function() {
});
}
Let's now add an ordinal number to the end of the paragraph text on click. In this case, we will obtain this number from our collection:
for (let elem of elems) {
elem.addEventListener('click', function() {
this.textContent += map.get(this);
});
}
Inputs are given. Iterate over these
inputs and create a Map
collection,
in which keys are the inputs, and a value
is their ordinal number on the page. Make
it so that when you click on any input, its
ordinal number is written to its value
.
Inputs are given. You can enter a number
into each input. Let by pressing Enter
the input remembers the entered number. Make
it so that when focus is lost in the input,
an array of all the numbers entered earlier
in the input is displayed in the console.