1

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]

Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
프로형
  • 27
  • 3

2 Answers2

3

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>
Scott Marcus
  • 64,069
  • 6
  • 49
  • 71
  • https://stackoverflow.com/questions/9158238/why-js-function-name-conflicts-with-element-id/9160009#9160009 – brk Apr 02 '19 at 17:44
  • @brk That link isn't really the actual case here. It's not so much about form elements as it is about any element's `id` being treated as a Global variable (which does stem from the pre-DOM days). Doesn't matter if it's an `input` or a `div`. – Scott Marcus Apr 02 '19 at 19:08
0

   <!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.

Thomas Tallman
  • 71
  • 1
  • 1
  • 13