如何使用innerHTML將結果打印到div標簽中

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 個解決方案

解決方案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