Seeking an explanation for why my current implementation isn't working. I'm attempting to create a quiz with a multiple choice section where the correct answer turns green when clicked, and incorrect answers turn red. Despite validating the code and finding no errors, the buttons remain non-interactive. Can someone help me identify what might be going wrong here?
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>Trivia!</title>
<script>
document.addEventListener('DOMContentLoaded', function(){
let incorrects = document.querySelectorAll(".incorrect_answer");
incorrects.addEventListener('click', function() {
let clicked = event.srcElement;
clicked.style.backgroundColor = 'red';
});
let correct = document.querySelector(".correct_answer");
correct.addEventListener('click', function() {
correct.style.backgoundColor = 'green';
});
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>How many species of Dolphin are there?</h3>
<button class="correct_answer">42</button>
<button class="incorrect_answer">53</button>
<button class="incorrect_answer">24</button>
<button class="incorrect_answer">11</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here use input tags -->
</div>
</div>
</body>
</html>