In an attempt to create a modal window, I am facing issues with adding a click event listener to a div that should modify the CSS style of another element. The goal is to change the display property from 'none' to 'border-box' when the div/button is clicked, but for some reason, clicking the div does not seem to have any effect. Even after console logging, there were no visible results. Interestingly, moving the clickable div to a different part of the HTML document seems to resolve the issue, which has left me feeling perplexed.
Below is the provided snippet of HTML:
<!DOCTYPE html>
<html lang="en">
...
</body>
</html>
Accompanied by the JavaScript code snippet:
document.querySelector('#modal-btn').addEventListener('click',
function() {
document.querySelector('.modal').style.display = 'border-box';
});
And here's a sample of the corresponding CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Titillium Web, Arial, sans-serif;
font-size: 1rem;
}
...