Need help getting my javascript code working

JavaScript
1

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";
    }
}
2

Hi @brjsh20 !

I tested your code in vs code and was able to get the alert working.

I would suggest commenting out all of your javascript code except for the alert just to make sure it is properly linked in the html file.

When I tested it I made sure that the js and html files were in the same folder.
I don’t know your folder structure but maybe it is an issue with the path.

Sidenote: This is not how you write an input tag

<input type = "text" id = "input2" autocomplete = "off"></input>
3

Thanks! They’re in the same folder. I didn’t need to close the input tag, and I had a form tag earlier, but I just got really impatient and had no idea, so just removed the form tag(googled if I can use input without a form tag, and turns out yes, I know it’s pointless, but I was confused where the issue was).

4

Turns out that when I commented out everything else, it works. But alert was literally the first thing in the file, so that should be read first. This is confusing.

5

Finally, looks like I used “or” instead of “||” due to habit, so one of the issues is resolved. Only the issue with the text-response seems to be an issue

6

You need to have the onclick function then do the if statement checking for the value.

submit.onclick = function(){
  if(col.value === 'Java' || col.value === 'java'){
    span.innerHTML = "Correct!";
    col.style.backgroundColor = "green";
  } else {
    span.innerHTML = "Incorrect";
    col.style.backgroundColor = "red";
  }
}
7

I have also edited your post so the context of this discussion makes more sense.