计算不在javascript代码中递增

时间：2018-01-20 10:53:49

标签： javascript html

在这里，我正在使用一个javascript代码，我在其中使用onclick事件，但不知何故，虽然该函数正常工作，但它并没有增加我的计数值： js代码是：

var questions=[
{
    "q":"1.what is html?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"aaa"
},
{
    "q":"2.what are those?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"bbb"
},
{
    "q":"3.what is this?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"ccc"
},
{
    "q":"4.what is that?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"ddd"
}
];
var i=0;
var count=0;
show(0);
function show(i){
document.getElementById("ques").innerHTML=questions[i].q;
document.getElementById("o1").innerHTML=questions[i].a;
document.getElementById("o2").innerHTML=questions[i].b;
document.getElementById("o3").innerHTML=questions[i].c;
document.getElementById("o4").innerHTML=questions[i].d;

 }


document.getElementById("sub").onclick=function(){
if(document.getElementById("o1").checked && questions[i].a==questions[index].answer)
{
    count++;
}
 if(document.getElementById("o2").checked && questions[i].b==questions[index].answer)
{
    count++;
}
 if(document.getElementById("o3").checked && questions[i].c==questions[index].answer)
{
    count++;
}
 if(document.getElementById("o4").checked && questions[i].d==questions[index].answer)
{
    count++;
}
document.getElementById("aa").checked=false;
document.getElementById("bb").checked=false;
document.getElementById("cc").checked=false;
document.getElementById("dd").checked=false;
i++;


if(questions.length-1<i)
{   
    document.write("<body style='background-color:red;'>");
    document.write("<div>Your score is:"+count+"</div>");
    document.write("</body>")
}
show(i);
}

我想知道为什么它不起作用，因为我没有看到任何错误，请帮助我。 if块打印计数正在运行，因为背景变为红色，所以我只需要知道如何增加计数。

代码用于等效的html代码： 

<!doctype html>
<html>
<head>
<title>
    Ques and Ans
</title>
<link rel="stylesheet" type="text/css" href="qa.css"> 
</head>
<body>
<div id="container">
    <header>
        <div class="header_mid">
            <h1>BitsBridge</h1>
        </div>
    </header><br>
    <div id="main">
            <div id="ques"> 
            </div><br>
            <div>
                <input type="radio" id="aa" name="options"/>
                <span id="o1"></span>
            </div><br>
            <div>
                <input type="radio" id="bb" name="options"/>
                <span id="o2"></span>
            </div><br>  
            <div>
                <input type="radio" id="cc" name="options"/>
                <span id="o3"></span>
            </div><br>
            <div>
                <input type="radio" id="dd" name="options"/>
                <span id="o4"></span>
            </div><br>
    </div>
 </div>
 <button type="button" class="submit" id="sub">Next</button>

 <script type="text/javascript"  src="qa.js">
 </script>

</body>
</html>

3 个答案:

答案 0 :(得分：0)

你的条件错了。

document.getElementById("o1").checked && questions[i].a==questions[index].answer

首先，document.getElementById("o1")没有选中元素，只是span。

questions[i].a==questions[index].answer

代码中没有index定义。尝试使用调试器来查找错误。

答案 1 :(得分：0)

你正在检查错误的元素（这是跨度）document.getElementById("o1") 例如，要获得第一个单选按钮，就必须这样做 document.getElementById("aa")。 其次，您正在使用未定义的索引，您必须像这样使用i questions[i].answer 

var questions=[
{
    "q":"1.what is html?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"aaa"
},
{
    "q":"2.what are those?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"bbb"
},
{
    "q":"3.what is this?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"ccc"
},
{
    "q":"4.what is that?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"ddd"
}
];
var i=0;
var count=0;
show(0);
function show(i){
document.getElementById("ques").innerHTML=questions[i].q;
document.getElementById("o1").innerHTML=questions[i].a;
document.getElementById("o2").innerHTML=questions[i].b;
document.getElementById("o3").innerHTML=questions[i].c;
document.getElementById("o4").innerHTML=questions[i].d;

 }


document.getElementById("sub").onclick=function(){
    //console.log(questions[i].a);
    //console.log(questions[i].answer);
if(document.getElementById("aa").checked && questions[i].a==questions[i].answer)
{
    count++;
}
 if(document.getElementById("bb").checked && questions[i].b==questions[i].answer)
{
    count++;
}
 if(document.getElementById("cc").checked && questions[i].c==questions[i].answer)
{
    count++;
}
 if(document.getElementById("dd").checked && questions[i].d==questions[i].answer)
{
    count++;
}
document.getElementById("aa").checked=false;
document.getElementById("bb").checked=false;
document.getElementById("cc").checked=false;
document.getElementById("dd").checked=false;
i++;


if(questions.length-1<i)
{   
    document.write("<body style='background-color:red;'>");
    document.write("<div>Your score is:"+count+"</div>");
    document.write("</body>")
}
//console.log(count);
show(i);
}
<!doctype html>
<html>
<head>
<title>
    Ques and Ans
</title>
<link rel="stylesheet" type="text/css" href="qa.css"> 
</head>
<body>
<div id="container">
    <header>
        <div class="header_mid">
            <h1>BitsBridge</h1>
        </div>
    </header><br>
    <div id="main">
            <div id="ques"> 
            </div><br>
            <div>
                <input type="radio" id="aa" name="options"/>
                <span id="o1"></span>
            </div><br>
            <div>
                <input type="radio" id="bb" name="options"/>
                <span id="o2"></span>
            </div><br>  
            <div>
                <input type="radio" id="cc" name="options"/>
                <span id="o3"></span>
            </div><br>
            <div>
                <input type="radio" id="dd" name="options"/>
                <span id="o4"></span>
            </div><br>
    </div>
 </div>
 <button type="button" class="submit" id="sub">Next</button>

 <script type="text/javascript"  src="qa.js">
 </script>

</body>
</html>

答案 2 :(得分：0)

您需要使用i值而不是index值，而document.getElementById函数中的document.getElementById("sub").onclick应该是单选按钮的id而不是id您使用过的<span>元素。以来， .checked是单选按钮的属性，而不是<span>元素。

＆＃13;
＆＃13; 
var questions=[
{
    "q":"1.what is html?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"aaa"
},
{
    "q":"2.what are those?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"bbb"
},
{
    "q":"3.what is this?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"ccc"
},
{
    "q":"4.what is that?",
    "a":"aaa",
    "b":"bbb",
    "c":"ccc",
    "d":"ddd",
    "answer":"ddd"
}
];
var i=0;
var count=0;
show(0);
function show(i){
document.getElementById("ques").innerHTML=questions[i].q;
document.getElementById("o1").innerHTML=questions[i].a;
document.getElementById("o2").innerHTML=questions[i].b;
document.getElementById("o3").innerHTML=questions[i].c;
document.getElementById("o4").innerHTML=questions[i].d;

 }


document.getElementById("sub").onclick=function(){
if(document.getElementById("aa").checked && questions[i].a==questions[i].answer)
{
    count++;
}
 if(document.getElementById("bb").checked && questions[i].b==questions[i].answer)
{
    count++;
}
 if(document.getElementById("cc").checked && questions[i].c==questions[i].answer)
{
    count++;
}
 if(document.getElementById("dd").checked && questions[i].d==questions[i].answer)
{
    count++;
}
document.getElementById("aa").checked=false;
document.getElementById("bb").checked=false;
document.getElementById("cc").checked=false;
document.getElementById("dd").checked=false;
i++;

if(questions.length-1<i)
{   
    document.write("<body style='background-color:red;'>");
    document.write("<div>Your score is:"+count+"</div>");
    document.write("</body>")
}
show(i);
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <header>
        <div class="header_mid">
            <h1>BitsBridge</h1>
        </div>
    </header><br>
    <div id="main">
            <div id="ques"> 
            </div><br>
            <div>
                <input type="radio" id="aa" name="options"/>
                <span id="o1"></span>
            </div><br>
            <div>
                <input type="radio" id="bb" name="options"/>
                <span id="o2"></span>
            </div><br>  
            <div>
                <input type="radio" id="cc" name="options"/>
                <span id="o3"></span>
            </div><br>
            <div>
                <input type="radio" id="dd" name="options"/>
                <span id="o4"></span>
            </div><br>
    </div>
 </div>
 <button type="button" class="submit" id="sub">Next</button>

 <script type="text/javascript"  src="qa.js">
 </script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题