I recently came across the "event.currentTarget" and the "event.target" features in JavaScript. So I decided to write a little program that differentiates between the two. The initial way I wrote the program was okay until I thought about improving it a bit with an array that is mainly comprised of vowel alphabets, and an if statement to check whether the first alphabet of the node or tag name begins with any of the array items.
――――――――――――― The annoying little problem ―――――――――――――
In the first condition of the if statement, I basically said: if an HTML element begins with any of these alphabets in the array, let the word, "an", come before it.
In spite of the fact that the above statement comes first, the second statement is the one that executes, which says: You clicked on "a" EM element, instead of the word "an" (you know, since it is grammatically correct to say: "an EM element" instead of "a EM element").
const grandParent = document.querySelector('main#grand-parent')
const parent = document.querySelector('section#parent')
const children = document.querySelector('div#children')
const currentTargetOutput = document.querySelector('strong#currentTargetOutput')
const targetOutput = document.querySelector('strong#targetOutput')
function currentTargetClick(e) {
currentTargetOutput.textContent = `You clicked on a ${e.currentTarget.tagName} element`;
}
const vowels = ['A', 'E', 'I', 'O', 'a', 'e', 'i', 'o']
function targetClick(e) {
for (const vowel of vowels) {
if (e.target.nodeName.startsWith(vowel)) {
targetOutput.textContent = `You clicked on an ${e.target.nodeName} element`;
} else {
targetOutput.textContent = `You clicked on a ${e.target.nodeName} element`;
}
}
}
grandParent.addEventListener('click', currentTargetClick)
grandParent.addEventListener('click', targetClick)body {
font-family: 'Nirmala UI';
background-color: #dddddd;
}
main#grand-parent {
background-color: #0ff;
width: 300px;
height: 300px;
display: grid;
place-items: center;
margin-left: auto;
margin-right: auto;
}
section#parent {
background-color: #f00;
width: 250px;
height: 250px;
display: grid;
place-items: center;
}
div#children {
background-color: #0f0;
color: #fff;
width: 200px;
height: 200px;
text-align: center;
}
div#output {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: fit-content;
}<main id="grand-parent">
<section id="parent">
<div id="children">
<h1>Hello</h1>
<h3>World!</h3>
<p>You</p>
<strong>are welcome</strong>
<em>again</em>
</div>
</section>
</main>
<div id="output">
<strong id="currentTargetOutput"></strong>
<br />
<strong id="targetOutput"></strong>
</div>Please help me solve this.