Question

所以，这是我在这里的第一篇文章：）我是一个新手程序员，所以遇到了一些麻烦

我有一个简单的数学游戏，用户可以回答10个问题，并且必须显示结果。首先，用户必须输入他/她的姓名并以表格形式选择难度级别。回答问题后，我希望将结果打印在表单本身内的div标签中。我使用了innerHTML，但无法做到这一点。

为简单起见，我仅为初学者制作了该功能。这是代码。

<!DOCTYPE html>
<html>
<head>
    <title>Maths Game</title>
</head>
<body>
<form>
    <p id="topic"><b>Maths Game</b></p>

    <hr></br>

    <label for="name">Name</label>
    <input type="text" name="name" id="name" placeholder="Enter your name" 
     required></br></br>

    <label for="level">Game level</label>
    Beginner
    <input type="radio" name="level" value="beginner">
    Intermediate
    <input type="radio" name="level" value="intermediate">
    Advanced
    <input type="radio" name="level" value="advanced"></br></br>

    <p id="start"><button type="submit" onclick="confirmation();">Start 
    Quiz</button></p>

    <div id="results"></div>

</form>



<script type="text/javascript" language="javascript">

    function beginnerQuestions(){
        var marks=0;
        function questions(){
            var marks=0;
            var x=Math.floor(Math.random()*11)+1;
            var y=Math.floor(Math.random()*11)+1;
            var o=["+","-"];
            var q1=x+o[Math.floor(Math.random()*o.length)]+y;
            var ans=eval(q1).toFixed(1);
            var a1=prompt(q1+" is");
            if(eval(a1).toFixed(1)==ans){
                document.getElementById("results").innerHTML="</br>"+'<div 
            id="pass">'+'<img src="right.png" height="13" 
            width="13">'+q1+"="+a1+'</div>'

                marks=eval(marks+2);
            }
            else{
                document.getElementById("results").innerHTML="</br>"+'<div 
            id="fail">'+'<img src="wrong.png" height="13" width="13">'+"Your 
            answer: "+a1+"  Correct answer: "+ans+'</div>');


            }
            return marks
        }


        for(i=0; i<10; i++){
            questions();
        }

        if(marks<10){
            document.getElementById("results").innerHTML='<p id="high">'+" 
        </br>"+"</br>"+"Marks: "+marks+'</p>';
        }
        else{
            document.getElementById("results").innerHTML='<p id="low">'+" 
        </br>"+"</br>"+"Marks: "+marks+'</p>';

    }

    function confirmation(){
        var user=document.getElementById("name").value;

        var l=document.querySelector('input[name=level]:checked').value;

        confirm("Hello"+user+"!. You have chosen the "+l+" level for your 
        maths quiz. Is this correct? Please press OK to start or Cancel to 
        choose a different level of difficulty.")

        if(l="beginner"){
            beginnerQuestions();
        }
        if(l="intermediate"){
            intermediateQuestions();
        }
        if(l="advanced"){
            advancedQuestions();
        }
    }



    </script>
</body>
</html>

Answer 1

我相信您的问题的部分原因在于您在.innerHTML之后编写字符串的方式。对于第二个，请尝试：

document.getElementById("results").innerHTML = "</br><div id='fail'><img src'wrong.png' height='13' width='13'>Your answer: "+a1+" Correct answer: "+ans+"</div>";

与您的其他.innerHTML字符串相同。您只需在插入变量时加号，而不必在HTML标记之间加号。另外，仅在打开和关闭字符串的一部分时才应使用“，对于属性应使用'。反之亦然。

您不需要在字符串末尾添加)。您应该使用</br>而不是<br>。而且，您在beginnerQuestions()函数末尾缺少结束标记。

JSFiddle示例：https://jsfiddle.net/81wvm6h7/6/

参考： https://developer.mozilla.org/fr/docs/Web/API/Element/innertHTML ＆https://www.w3schools.com/tags/tag_br.asp

Answer 2

if else语句必须带有open和close大括号...

请检查您的beginnerQuestions()函数内部：

if(marks<10){
    document.getElementById("results").innerHTML='<p id="high">'+" 
    </br>"+"</br>"+"Marks: "+marks+'</p>';
}else{
    document.getElementById("results").innerHTML='<p id="low">'+" 
    </br>"+"</br>"+"Marks: "+marks+'</p>';
} //you forgot to put this line

如何使用innerHTML将结果打印到div标签中

2 个答案: