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

Question

So, this is my first post here:) I am a newbie programmer so I ran into a bit of a knot 所以，这是我的第一篇文章：）我是新手程序员，所以遇到了一些麻烦

I have a simple maths game where the user answers 10 questions and the results must be shown. 我有一个简单的数学游戏，用户可以回答10个问题，并且必须显示结果。 At the beginning the user must enter his/her name and choose the difficulty level in a form. 首先，用户必须输入他/她的姓名并以表格形式选择难度级别。 Once the questions are answered i want the results to be printed in a div tag inside the form itself. 回答问题后，我希望将结果打印在表单本身内的div标签中。 I used innerHTML but couldn't manage to do so. 我使用了innerHTML，但无法做到这一点。

I only made the function for the beginner level for simplicity. 为了简单起见，我仅针对初学者进行了此功能。 Here is the code. 这是代码。

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

I believe part of your problem comes from the way you've written your string following .innerHTML. 我相信您的问题的部分原因在于您使用.innerHTML编写字符串的方式。 For the second one, try with : 对于第二个，请尝试：

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

Same for your other .innerHTML strings. 与其他.innerHTML字符串相同。 You only need to + sign when inserting variables, not between HTML Tags. 您只需在插入变量时加号，而不必在HTML标记之间加号。 Also, you should use " only when opening & closing part of the string and ' for attributes. Or the opposite. 另外，仅在打开和关闭字符串的一部分时才应使用“，而对于属性则应使用'。反之亦然。

You don't need to add a ) at the end of the string. 您无需在字符串末尾添加) 。 Instead of </br> , you should be using <br> . 您应该使用<br>而不是</br> 。 And you are missing a closing tag at the end of your beginnerQuestions() function. 而且，您在beginnerQuestions()函数末尾缺少结束标记。

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

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

Answer 2

if else statement must have open and close curly bracket... if else语句必须具有open和close大括号...

please check inside your beginnerQuestions() function: 请检查您的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 个解决方案

解决方案1
0 2018-12-13 18:12:24

解决方案2
0 2018-12-13 18:17:46

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

问题描述

2 个解决方案

解决方案1 0 2018-12-13 18:12:24

解决方案2 0 2018-12-13 18:17:46

解决方案1
0 2018-12-13 18:12:24

解决方案2
0 2018-12-13 18:17:46