this code isnt working it isnt saying correct when you choose correct answer and it isnt saying incorrect when it is incorrect
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name = "viewport" content="width=device-width", initia] <
<title>Simple Quiz</title
<link> rel="stylesheet" type="text/css" href="style.sheet" /
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish</h2>
<button id="option1">Justo ale Frentas</button>
<button id="option2">Todo Recto</button>
<button id="option3">Justo ala Frente</button>
<button id="option4">Justo al Frenta</button>
<p id="result" style="display: none"></p>
<script>
const correctAnswer = "Todo Recto"
const buttons =document.querySelectorAll("button");
const resultMessage = document.getElementById("result")
buttons.forEach((button) => {
button.addEventListener("click", () => {
if (button.textContent === correctAnswer) {}
resultMessage.textContent = "Correct!";
} else {
resultMessage.textContent = "Try again";
}
resultMessage.style.display = "block";
});
});
</script>
</body>
</html>
There are a few syntax errors in your code that may be causing it not to work as expected. Here is the corrected version:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Simple Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h2>How do you say "Straight Ahead" in Spanish</h2>
<button id="option1">Justo ale Frentas</button>
<button id="option2">Todo Recto</button>
<button id="option3">Justo ala Frente</button>
<button id="option4">Justo al Frenta</button>
<p id="result" style="display: none"></p>
<script>
const correctAnswer = "Todo Recto";
const buttons = document.querySelectorAll("button");
const resultMessage = document.getElementById("result");
buttons.forEach((button) => {
button.addEventListener("click", () => {
if (button.textContent === correctAnswer) {
resultMessage.textContent = "Correct!";
} else {
resultMessage.textContent = "Incorrect!";
}
resultMessage.style.display = "block";
});
});
</script>
</body>
</html>
```
I have corrected the meta tag, title tag, link tag, and the JavaScript code. The if-else statement in the event listener has been appropriately formatted to check if the clicked button's text content matches the correct answer. If not, it will display "Incorrect!".