CODEWITHSUNDEEP
javascript
프로형
프로형

Reputation: 27

If and Else and innerHTML html

This would be my second question, and I want to ask you guys what the problem is this:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HyunseoQuiz</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css">
        <script lang="text/javascript">
            function firstQ(){
                var firstQuestion = document.getElementById('firstQuestion').value;
                if(firstQuestion == '5'){
                    document.getElementById("firQ").innerHTML = "Correct";
                } else {
                    document.getElementById("firQ").innerHTML = "Wrong!";
                }
            }
        </script>
    </head>
    <body>
        <form name="firstQ" action="">
            <p>Q1. What is 2 + 3?</p>
            <input type="text" id="firstQuestion" name="firstQ">
            <input type="button" id="firstQ" value="answer" onclick="firstQ()">
            <br>
            <p id="firQ"></p>
        </form>
    </body>
    </html>

I want if the number 5 is in the variable, I want to show the word 'Correct' below the input box.

Can anybody help me pleaaaaaaaaaaaaaaaaaaaaaaaaaaaaaase?

[sorry if my grammar is wrong. I am not good in English]

Upvotes: 1

Views: 63

Answers (2)

Thomas Tallman
Thomas Tallman

Reputation: 81

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HyunseoQuiz</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
  
    <script lang="text/javascript">
        function firstQ() {
            var firstQuestion = document.getElementById("firstQuestion").value;
            if(firstQuestion == 5){
                document.getElementById("firQ").innerHTML = "Correct";
            } else {
                document.getElementById("firQ").innerHTML = "Wrong!";
            }
        }
    </script>
</head>
<body>
    <form name="first" action="click">
        <p>Q1. What is 2 + 3?</p>
        <input type="text" id="firstQuestion" name="first">
        <input type="button" id="first" value="answer" onclick="firstQ()">
        <br>
        <p id="firQ"></p>
    </form>
</body>
</html>

You used FirstQ too many times, as names, and as ids. The function can't run because of the overuse of FirstQ. i believe this is the simplest answer to your question.

Upvotes: 0

Scott Marcus
Scott Marcus

Reputation: 65855

Your input field has an id of firstQ, which is the same as your function name and it's causing a conflict. Adjust the input id.

FYI: If you had turned on your developer's tools (F12 in any browser) and looked at the console tab, you would have seen the error: firstQ is not a function, which is an indicator that there is a problem with the JS runtime locating your function. After verifying that you do, in fact, have a function with that name, you can then try to figure out why it wouldn't be recognized. 

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>HyunseoQuiz</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" media="screen" href="main.css">
        <script lang="text/javascript">
            function firstQ(){
                var firstQuestion = document.getElementById('firstQuestion').value;
                if(firstQuestion == '5'){
                    document.getElementById("firQ").innerHTML = "Correct";
                } else {
                    document.getElementById("firQ").innerHTML = "Wrong!";
                }
            }
        </script>
    </head>
    <body>
        <form name="q1" action="">
            <p>Q1. What is 2 + 3?</p>
            <input type="text" id="firstQuestion" name="quest1">
            <input type="button" id="q1" value="answer" onclick="firstQ()">
            <br>
            <p id="firQ"></p>
        </form>
    </body>
    </html>

Upvotes: 3

Related Questions