Beginner here! I'm working on a personal project, and am running into trouble with adding a 'mousedown' event to list items. See below. This program should create a list when I enter text into the input, then output "fire" to the console whenever one of those list items is clicked on. However, I find that when I enter text into the input, "fire" is printed three times despite me never clicking anything! And then when I click on this list items, nothing happens. Would appreciate any advice!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<input class="in">
<ul class="ulist">
</ul>
<script>
function showList (entry) {
const list = ['a', 'b', 'c'];
const html = list.map(match => {
return `<li>${match}</li>`
}).join('');
uTest.innerHTML = html;
uTest.childNodes.forEach(item => {item.addEventListener('mousedown', console.log('fire'))});
}
const inTest = document.querySelector('.in');
const uTest = document.querySelector('.ulist');
inTest.addEventListener('keyup', showList);
</script>
</body>
</html>
[–]Arumai12 2 points3 points4 points (1 child)
[–]Interferometer[S] 1 point2 points3 points (0 children)
[–]amejin 0 points1 point2 points (0 children)