I am very new to Javascript and HTML. So I don’t really know how to format my google searches to give me the answer I am looking for. However I did try and I have this code below.
<!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>
var buttonClicked = null;
function freeFormCheck(){
const answerInput = document.getElementById('answer').value
let header = document.querySelector("#part2");
if(answerInput === "Edinburgh"){
header.innerText = "Correct answer!";
}else{
header.innerText = "Wrong answer!";
}
}
function validationButton(id){
if(buttonClicked != null){
buttonClicked.style.background = "#d9edff";
};
buttonClicked = document.getElementById(id);
let header = document.querySelector("#part1");
switch(id){
case "correct":
buttonClicked.style.background = "green";
header.innerText = "Correct answer!";
break;
case "one":
buttonClicked.style.background = "red";
header.innerText = "Wrong answer!";
break;
case "two":
buttonClicked.style.background = "red";
header.innerText = "Wrong answer!";
break;
case "three":
buttonClicked.style.background = "red";
header.innerText = "Wrong answer!";
break;
}
}
</script>
</head>
<body>
<div class="header">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<h3>On average, statistically: how many men die every hour?</h3>
<h3 id="part1"></h3>
<button onClick=validationButton(id) id="correct">1 per hour</button>
<button onClick=validationButton(id) id="one">0.5 per hour ( 1 per 2 hour)</button>
<button onClick=validationButton(id) id="two">less than 1 per hour</button>
<button onClick=validationButton(id) id="three">0.25 per hour</button>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<h3>What used to be the capital of Scotland</h3>
<h3 id="part2"></h3>
<form>
<lable for="answer">Enter here:</lable>
<input type="text" id="answer"><br>
<input for="answer" type="button" onClick=freeFormCheck()>
</form>
</div>
</div>
</body>
</html>
This is a whole chunk of code so I will list the problem below with the relevant code:
For context: I am suppose to ask a question where the user inputs a response and then I have to check if it is the right answer.
Here is the html part:
<h3>What used to be the capital of Scotland</h3>
<h3 id="part2"></h3>
<form>
<lable for="answer">Enter here:</lable>
<input type="text" id="answer"><br>
<input for="answer" type="button" onClick=freeFormCheck()>
</form>
And here is the java script for freeFormCheck():
function freeFormCheck(){
const answerInput = document.getElementById('answer').value
let header = document.querySelector("#part2");
if(answerInput === "Edinburgh"){
header.innerText = "Correct answer!";
}else{
header.innerText = "Wrong answer!";
}
}
So to my understanding and some google researches, document.getElementById().value should’ve returned and stored the user input in the constant called answerInput.
This then should’ve been compared in the if statement.
I know for sure the header part works because it worked in the other javascript function.
Can anyone help?