Question

我正在尝试使用随机数填充表格，然后让用户填写总计。在输入总数之后我想检查答案，如果答案是正确的，我想不再允许输入如果答案是错误的我希望单元格突出显示并允许用户再试一次。

表格正在填写并且正在识别不正确的答案，但是进一步尝试修改答案并未给出任何反馈。我不确定为什么输入按钮不能多次使用我猜测需要清除一些东西以接受另一个条目。我只是在玩JS，所以这可能非常简单，但我找不到合适的解决方案。

谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Testing</title>
<link href='https://fonts.googleapis.com/css?    family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,800,700,600,300'    rel='stylesheet' type='text/css'/>

<script type="text/javascript">

var ran = new Array(4);
var count = 0;

function randomArray ( )
{
    count = 0;
    var max = 10;
    var min = 5;

    for ( var i = 0; i < ran.length; ++i)
    {
        ran[i] = Math.floor(Math.random()*(max - min + 1) + min);
    }
    iter = Math.floor(Math.random()*(4));
    iter2 = Math.floor(Math.random()*(4));


}

function fillRandom(id)
{

    document.getElementById(id).innerHTML = ran[count];
    count++;

}

function check(id, id2, i, j)
{

    var ans = document.getElementById(id).value.toString();
    var soln = document.getElementById(id2);


    //document.getElementById(id2).style.border = "thick red double";
    if (ans != (ran[i] + ran[j]))
    {
        soln.style.border = "thick red double";
        correct = false;

    }
    else
    {
        soln.innerHTML = (ran[i] + ran[j]);
        correct = true;


    }

}

</script>
</head>

<body>
<h1>Testing</h1>

<input type="submit" value="Get Questions" onclick="randomArray();fillRandom('num1');fillRandom('num2');fillRandom('num3');fillRandom('num4');"/>
<p>Try the following questions:</p>

<table  id="data" border="thin black">
<tr>
    <td>&nbsp;</td>
    <td id="A">A</td>
    <td id="B">B</td>
    <td>Total</td>
</tr>
<tr>
    <td id="C">C</td>
    <td id="num1">&nbsp;</td>
    <td id="num2">&nbsp;</td>
    <td id="t12"><input id="total_1_2" type="text" /></td>
</tr>
<tr>
    <td id="D">D</td>
    <td id="num3">&nbsp;</td>
    <td id="num4">&nbsp;</td>
    <td id="t34"><input id="total_3_4" type="text" /></td>
</tr>
<tr>
    <td>Total</td>
    <td id="t13" ><input type="text" id="total_1_3"/></td>
    <td id="t24"><input type="text" id="total_2_4"/></td>
    <td id="t"><input type="text" id="total"/></td>
</tr>

</table>


<br/>
<input type="submit" value="Check Total" onclick="check('total_1_2', 't12', '0', '1');check('total_3_4', 't34', '2', '3');check('total_1_3', 't13', '0', '2');
    check('total_2_4', 't24', '1', '3')">


</body>

</html>

Answer 1

当您更正条目并单击“检查总计”时，代码现在将input元素转换为包含用户数据的内容，但它不会更改单元格边框。边框设置为thick red double，没有任何改变。最小的修复方法是编辑if函数中check语句的该部分，以便设置正常边框：soln.style.border = "solid thin black";。

然而，在设计中还有很多其他问题需要解决。现在，如果您输入几个不正确的答案并修复其中一个，然后单击“检查总计”，您将在控制台日志中看到一条错误消息。原因是检查代码尝试从input元素获取用户数据，即使在现在不包含input元素的单元格中也是如此。因此，您可能需要修改逻辑，以便不删除input元素，或者删除已删除的input元素也将从要检查的元素集中删除。

Answer 2

 function check(id, id2, i, j)
{

    var ans ;
    if(document.getElementById(id) !== null)
        ans = document.getElementById(id).value;
    else
        ans = document.getElementById(id2).textContent;

    var soln = document.getElementById(id2);

    if (ans != (ran[i] + ran[j]))
    {
        soln.style.border = "thick red double";
        correct = false;    
    }
    else
    {
        soln.innerHTML = (ran[i] + ran[j]);
         soln.style.border = "none";
        correct = true;        
    }    
}

http://jsfiddle.net/g6zhL/

如何在Javascript中检查输入type = text的输入

2 个答案: