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

除上述答案外，我还建议如下。如果以编程方式修改页面内容，通常可以使用库来节省时间，该库提供更清晰/更直接的界面。一个用于此目的的通用库是jQuery：http://jquery.com/

Answer 2

您不想使用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应该在那时加载）。

跑分数/测验游戏

2 个答案: