如果和其他以及innerHTML html

时间:2019-04-02 16:27:15

标签: javascript

这是我的第二个问题,我想问你们这是什么问题:

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

我想如果数字5在变量中,我想在输入框下方显示“正确”一词。

有人可以帮助我吗?

[对不起,如果我的语法错误。我的英语不好]

2 个答案:

答案 0 :(得分:3)

您的输入字段的idfirstQ,与您的函数名相同,这会引起冲突。调整输入id

仅供参考:如果您打开了开发人员的工具(在任何浏览器中都为F12),并查看了“控制台”选项卡,则可能会看到错误:firstQ is not a function,这表明该工具存在问题。 JS运行时查找您的函数。在确认您确实拥有具有该名称的功能之后,您可以尝试找出为什么无法识别它的原因。

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

答案 1 :(得分: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>

您多次使用FirstQ作为名称和ID。由于FirstQ的过度使用,该功能无法运行。我相信这是对您问题最简单的答案。