if i uncomment, why doesn’t the code as is now, work?
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Prevent default example</title>
<style>
div {
margin-bottom: 10px;
}
</style>
</head>
<body>
<!-- <form>
<div>
<label for="fname">First name: </label>
<input id="fname" type="text">
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" type="text">
</div>
<div>
<input id="submit" type="submit">
</div>
</form>
<p></p>
-->
<div id="container">
<button>Click me!</button>
</div>
<pre id="output"></pre>
<script>
<!-- const form = document.querySelector('form'); -->
<!-- const fname = document.getElementById('fname'); -->
<!-- const lname = document.getElementById('lname'); -->
<!-- const para = document.querySelector('p'); -->
<!-- form.addEventListener('submit', e => { -->
<!-- if (fname.value === '' || lname.value === '') { -->
<!-- e.preventDefault(); -->
<!-- para.textContent = 'You need to fill in both names!'; -->
<!-- alert('You need to fill in both names') -->
<!-- } -->
<!-- }); -->
<!-- Let's try adding click event handlers to the button, its parent (the <div>), and the <body> element that contains both of them: -->
const output = document.querySelector('#output');
function handleClick(eve) {
output.textContent += `You clicked on a ${eve.currentTarget.tagName} element\n`;
}
const container = document.querySelector('#container');
const butt = document.querySelector('button');
document.body.addEventListener('click', handleClick);
container.addEventListener('click', handleClick);
butt.addEventListener('click', handleClick);
</script>
</body>
</html>