Working on cs50 trivia. Program responds to incorrect answer but not correct one
Question
The program needs to take the input of a free response question. the answer being poseidon. When the incorrect answer is put in the program responds with incorrect and turns red. My goal is when poseidon is typed in it will turn green and say correct, but it doesn't react at all to the correct answer.
I've tried a few different variat and this is as close as I can get
<!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 incorrect = document.querySelectorAll(".incorrect");
let correct = document.querySelector("#correct");
let response = document.querySelector("#response");
correct.addEventListener('click', function(){
correct.style.backgroundColor = "green";
response.innerHTML = "Correct";
})
for (let x = 0; x < incorrect.length; x++)
{
incorrect[x].addEventListener('click', function() {
incorrect[x].style.backgroundColor = 'red';
response.innerHTML = "incorrect";
})
}
document.querySelector("#submit").addEventListener('click', function(){
let input = document.querySelector('input');
let reply = document.querySelector("#reply");
if (input.value === "poseidon")
{
intput.style.color = 'green';
reply.innerHTML = "correct";
}
else
{
input.style.color = "red";
reply.innerHTML = "incorrect";
}
});
});
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>What is the capital of New York?</h3>
<button class="incorrect">Manhattan</button>
<button class="incorrect">Bronx</button>
<button id="correct">Albany</button>
<p id="response"></p>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>Who was the first god killed in the game title God of War III</h3>
<input type="text">
<button id="submit">Submit</button>
<p id="reply"></p>
</div>
</div>
</body>
</html>
1 answers
solution1
0 2022-12-18 01:13:31
You misspelled input: intput.style.color = 'green';
Common error, don't worry it was hard to find. ;)
So, just change:
if (input.value === "poseidon")
{
intput.style.color = 'green';
reply.innerHTML = "correct";
}
else
{
input.style.color = "red";
reply.innerHTML = "incorrect";
}
to
if (input.value === "poseidon")
{
input.style.color = 'green';
reply.innerHTML = "correct";
}
else
{
input.style.color = "red";
reply.innerHTML = "incorrect";
}
Also consider that user may type "Poseidon" , so I suggest you to check the value as this:
if (input.value.toLowerCase() === "poseidon")
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.