Question

我有一个简单的Javascript Math程序。它可以让您回答方程式，当它检查您的答案时，它会提醒您是否正确回答。

以下是添加的代码：

function randomAdd()
        {
            var x=document.getElementById("AddN1");
            x.value=Math.floor((Math.random()*12)+1);

            var y=document.getElementById("AddN2");
            y.value=Math.floor((Math.random()*12)+1);
        }

        function checkAdd()
        {
            var z=document.getElementById("AddA2");
            z.value= parseInt(document.getElementById("AddN1").value) + parseInt(document.getElementById("AddN2").value);


            if(parseInt(document.getElementById("AddA1").value)==z.value)
            {
                score=score+1;
                alert("Addition: Correct");
            }
            else
            {
                alert("Addition: Incorrect");
            }
        }
<form name="Addition">
        <table>
            <tr>
                <th>Addition</th> <th></th> <th></th> <th></th> <th></th> <th></th>
            </tr>
            <tr>
                <th>Number 1</th> <th></th> <th>Number 2</th> <th></th> <th>Type Your Answer</th> <th>Correct Answer</th>
            </tr>
            <tr>
                <td><input type="text" name="AddN1" id="AddN1"></td> <td>+</td> <td><input type="text" name="AddN2" id="AddN2"></td> <td>=</td> <td><input type="text" name="AddA1" id="AddA1"></td> <td><input type="text" name="AddA2" id="AddA2"></td>
            </tr>
            <tr>
                <td><input type="button" value="Get Numbers" onclick="randomAdd();"> <td></td> <td></td> <td></td> <td><input type="button" value="Check Answer" onclick="checkAdd();"> <th></th>
            </tr>
        </table>
</form>

我的大学为我提供了代码。我想保留一个简单的计数器，它将计算用户获得的所有正确答案，还有一个重置按钮，可以将计数器重置为零？

很抱歉，如果这听起来很基本，但我没有使用Javascript的经验。

感谢。

Answer 1

我没有测试但是我怀疑你的代码几乎默认工作，但唯一的问题是你没有在全局范围内声明你的score变量，这样其他函数就可以访问同一个变量没有进一步传递。

将var score = 0;添加到页面顶部可以使其正常工作，以后使用var score++; score = 0;增加1，var scoreElement=document.getElementById("score");重置它等等。其余的代码我留给你作为一个谜题，因为它的学校工作无论如何 - 只是想让你了解全局变量的使用。 :)但是尽量避免创建大量的全局变量，因为它也被称为不良实践，尽管它有时很难没有它们。阅读global variables, bad practice?

的更多内容

您的代码的调试技巧很少：

alert("Addition: Correct");
scoreElement.value=score;

此行在加载DOM之前执行，因此它可能为null。尝试更改行：

document.getElementById("score").value=score;

要

</body>

同时将所有javascript移到页面底部（例如：$(function() { // your javascript code });标签下） - 这是正确的方法。还有为什么你在没有真正使用时加载jquery.js？例如，您可以将所有javascript代码添加到文档内部。像这样：

{{1}}

Answer 2

你只需要在函数checkAdd（）{}

之外声明这样的变量分数

var score=0;

然后，在您显示分数后，它也会发出正确或不正确的警报对不起，现在我添加了resetScore函数

<form name="Addition">
        <table>
            <tr>
                <th>Addition</th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <th>Number 1</th>
                <th></th>
                <th>Number 2</th>
                <th></th>
                <th>Type Your Answer</th>
                <th>Correct Answer</th>
                <th>SCORE</th>
            </tr>
            <tr>
                <td>
                    <input type="text" name="AddN1" id="AddN1">
                </td>
                <td>+</td>
                <td>
                    <input type="text" name="AddN2" id="AddN2">
                </td>
                <td>=</td>
                <td>
                    <input type="text" name="AddA1" id="AddA1">
                </td>
                <td>
                    <input type="text" name="AddA2" id="AddA2">
                </td>
                <td>
                    <input type="text" name="score" id="score" value="0" readonly>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="Get Numbers" onclick="randomAdd();">
                <td></td>
                <td></td>
                <td></td>
                <td>
                    <input type="button" value="Check Answer" onclick="checkAdd();">
                </td>
                <td></td>
                <td>
                    <input type="button" value="Reset Score" onclick="resetScore();">
                </td>
            </tr>
        </table>
</form>
<script type="text/javascript">
var score=0;
function resetScore()
{   
    score=0;
    document.getElementById("score").value=score;
}
function randomAdd()
        {
            var x=document.getElementById("AddN1");
            x.value=Math.floor((Math.random()*12)+1);

            var y=document.getElementById("AddN2");
            y.value=Math.floor((Math.random()*12)+1);
        }


        function checkAdd()
        {
            var z=document.getElementById("AddA2");
            z.value= parseInt(document.getElementById("AddN1").value) + parseInt(document.getElementById("AddN2").value);

            if(parseInt(document.getElementById("AddA1").value)==z.value)
            {
                //score=score+1;
                score++;
                alert("Addition: Correct");
                document.getElementById("score").value=score;
            }
            else
            {   
                //score=score-1;
                score--;
                alert("Addition: Incorrect");
                document.getElementById("score").value=score;
            }
        }

</script>

如何使用javascript跟踪正确的答案？

2 个答案: