运行得分/问答游戏

Question

我是一名编码初学者，我正在研究这个测验类型的程序。它需要问预先创建的问题，然后检查你是否得到了正确的答案，调整你的运行分数，然后显示下一个问题。我完成了其他一切，但让我卡住的部分是这部分。

<!doctype html>
    
    <html lang="en">
    <head>
        <title>Group Project</title>
    </head>
    <body>
        <script text="text/javascript">
            var a = 0;
            var b = 0;
            document.write(a, "/", b)  
            function score() {
                
            
            var a = 0;
            var b = 0;
              
            if (document.question.one.value=="10") {
                ++a;
                ++b;
               
            }
            else{
                ++b;
                
            }
            document.write(a, "/", b)
            }
        </script>
        
        
        <form name="question"><br>
            <input type="text" name="one"/><br>
            <input type="button" value="Submit" onclick="score()" />
            
            
        </form>

我在 IF 语句中选择 10 只是为了看看增量是否有效，但是当我在文本输入中输入 10 时会发生什么，页面重新加载，只显示创建的分数，没有按钮或文本输入。我怎样才能使分数或分数保持一致，并且不需要重新加载完整的页面来增加？

Answer 1

您不想使用 document.write，因为它会清除所有文档以写入新内容。相反，您应该更改某些 DOM 元素的内部文本内容，例如 div。例如：

<form name="question">
    <div id="score"></div>
    <input type="text" name="one" />
    <br>
    <input type="button" value="Submit" onclick="score()" />
</form>

<script text="text/javascript">
    var a = 0;
    var b = 0;
    
    write(a, b);

    function score() {

        var a = 0;
        var b = 0;

        if (document.question.one.value == "10") {
            ++a;
            ++b;
        } else {
            ++b;
        }
        write(a, b);
    }
    
    function write(a, b) {
        document.getElementById('score').innerHTML = a + "/" + b;
    }
</script>

在上面的代码中，我引入了辅助函数 write，它在 div#score div.

中显示范围文本

另请注意，脚本现在位于表单元素之后，以确保 write 函数在执行时可以定位到 div#score（届时应该加载 HTML）。

Answer 2

除了上面的答案，我还推荐以下内容。如果您以编程方式修改页面内容，通常可以使用提供 cleaner/more 直接界面的库来节省时间。一个用于此目的的通用库是 jQuery：http://jquery.com/

运行得分/问答游戏

Running Score / Quiz game

html

javascript

forms

运行 得分/问答游戏

Running Score / Quiz game

html

javascript

forms

运行得分/问答游戏