Edit: I have the js file successfully linked to my html document. Now I need help getting the if/else statement working.
I have not put this into the HTML category as the main issue is also javascript-related and not limited to HTML. I recognise that the issue is with the HTML itself because when I put an alert as the first thing in the javascript file, it still didn’t do anything.
<!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>
</head>
<body>
<div class="jumbotron">
<h1>Trivia!</h1>
</div>
<div class="container">
<div class="section">
<h2>Part 1: Multiple Choice </h2>
<hr>
<!-- TODO: Add multiple choice question here -->
<h3>Which country is the fastest developing economy in the world?</h3>
<br>
<button id = "usa">France</button>
<button id = "france">USA</button>
<button id = "india">India</button>
<span id = "correction"></span>
</div>
<div class="section">
<h2>Part 2: Free Response</h2>
<hr>
<!-- TODO: Add free response question here -->
<h3>After which language was JavaScript named?</h3>
<span id = "span2"></span>
<input type = "text" id = "input2" autocomplete = "off"></input>
<button style = "background-color: red; color: white;" id = "submission">Check answer</button>
</div>
</div>
<script src = "index.js"></script>
</body>
</html>
these are the contents of my HTML file.
These below are those of my js file.
// alert("Hello there!")
let usa = document.getElementById("usa");
usa.onclick = () => {
document.getElementById("correction").innerHTML = "Incorrect";
usa.style.backgroundColor = "red";
}
let france = document.getElementById("france");
france.onclick = () => {
document.getElementById("correction").innerHTML = "Incorrect";
france.style.backgroundColor = "red";
}
let india = document.getElementById("india");
india.onclick = () => {
document.getElementById("correction").innerHTML = "Correct!";
india.style.backgroundColor = "green";
}
// TODO: Add code to check answers to questions
let span = document.getElementById("span2");
let submit = document.getElementById("submission");
let col = document.getElementById("input2");
if (col.value == "Java" or col.value == "java"){
submit.onclick = function(){
span.innerHTML = "Correct!";
col.style.backgroundColor = "green";
}
} else {
submit.onclick = function(){
span.innerHTML = "Incorrect";
col.style.backgroundColor = "red";
}
}