[英]Positioning of getElementById in HTML&Javascript
我正在使用Javascript进行多种选择的小型游戏，选择答案并点击Submit之后，在底部，它将显示我正确回答了多少个问题的答案，而错误地显示为“您正确地回答了问题1” ，或“您的问题2错误”。 但是，在“正确/错误答案：”之后，我无法在正确/错误的位置获得“您有问题”，但是当我尝试显示分数的方法时，它确实有效。有人可以指出请给我一个方向？谢谢您阅读我的文章的时间。
var firstQuestion = document.getElementsByName("firstQuestion"); var secondQuestion = document.getElementsByName("secondQuestion"); var thirdQuestion = document.getElementsByName("thirdQuestion"); var myArr = [firstQuestion, secondQuestion, thirdQuestion]; var score = 0; var score2 = 0; var score3 = 0; var firstPara = document.getElementById("firstPara"); var secondPara = document. getElementById("secondPara"); function submitted() { //for(var i = 0; i < myArr.length; i++) { for(var o = 0; o < firstQuestion.length; o++) { var num = o+1; var name= "choice" + num ; if ((document.getElementById(name).getAttribute("value") =="true") && (document.getElementById(name).checked)) { score++; $("#correctScore").text(score); document.getElementById("firstPara").innerHTML =document.getElementById("firstPara").innerHTML + "You got question 1 right!<br>"; break; } } if(score==0) { document.getElementById("secondPara").innerHTML =document.getElementById("secondPara").innerHTML + "You got question 1 wrong!<br>";; } //question 2 for(var o = 3; o < secondQuestion.length + 3; o++) { var num = o+1; var name= "choice" + num ; if ((document.getElementById(name).getAttribute("value") =="true") && (document.getElementById(name).checked)) { score++; score2++; $("#correctScore").text(score); document.getElementById("firstPara").innerHTML =document.getElementById("firstPara").innerHTML + "You got question 2 right!<br>"; break; } } if(score2==0) { document.getElementById("secondPara").innerHTML =document.getElementById("secondPara").innerHTML + "You got question 2 wrong!<br>";; } //question 3 for(var o = 6; o < thirdQuestion.length + 6; o++) { var num = o+1; var name= "choice" + num ; if ((document.getElementById(name).getAttribute("value") =="true") && (document.getElementById(name).checked)) { score++; score3++; $("#correctScore").text(score); document.getElementById("firstPara").innerHTML =document.getElementById("firstPara").innerHTML + "You got question 3 right!<br>"; break; } } if(score3==0) { document.getElementById("secondPara").innerHTML =document.getElementById("secondPara").innerHTML + "You got question 3 wrong!<br>";; $("#correctScore").text=0; }
<!DOCTYPE html> <html lang="en-us"> <head> <title>Trivia Game</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <link rel="stylesheet" href="assets/css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>Trivia Game</h1> </div> <div class="row"> <div class="col-md-12"> <div class="timeRemaining"> <p>Time Remaining: <span id="timer"></span> </div> </div> <input type="image" id="startBtn" src="assets/images/start.jpg" value="click me"/> <br> <div class="row"> <div class="col-md-12"></div> <div class="questions"> What is the name of Black Panther's home? </br> <input id="choice1" type="radio" name="firstQuestion" value="false"><small>K'un Lun</small> <input id="choice2" type="radio" name="firstQuestion" value="true"><small>Wakanda</small> <input id="choice3" type="radio" name="firstQuestion" value="false"><small>Kamar Taj</small> <br> <br> How did Dr Strange defeat Dormammu?</br> <input id="choice4" type="radio" name="secondQuestion" value="false"><small>Built An Energy Prison</small></input> <input id="choice5" type="radio" name="secondQuestion" value="true"><small>Create a Time Loop</small></input> <input id="choice6" type="radio" name="secondQuestion" value="false"><small>Froze Time</small></input> <br> <br> Which hero secretly has a family?</br> <input id="choice7" type="radio" name="thirdQuestion" value="true"><small>Hawkeye</small></input> <input id="choice8" type="radio" name="thirdQuestion" value="false"><small>Wakanda</small></input> <input id="choice9" type="radio" name="thirdQuestion" value="false"><small>Kamar Taj</small></input> </div> </div> </div> <br> <br> <br> <div class="row"> <div class="col-md-5"></div> <input type="button" id="submit" value="Submit" onclick="submitted()"/> </div> </div> <br> <div class="row"> <div class="col-md-12"> <div id="answerScreen"> <div class="splashBox2"> <h2>Let's see how you did</h2> <hr/> <p id="correctScreen">Correct Answers: <span id="correctScore"></span> </p> <p id="firstPara" style="font-size: 20;color: azure;margin-left: 60%;"></p> <p id="wrongScreen">Wrong Answers: <span id="wrongScore"></span> </p> <p id="secondPara" style="font-size: 20;color: azure; margin-left: 60%;"></p> </div> </div> </div> </div> <script src="assets/javascript/app.js"></script> </div> </body> </html>
在您的代码中几乎没有需要纠正的问题。
首先，JavaScript代码段存在语法错误，其中缺少最后一个花括号。 我认为这是在这里复制时的错误。
其次，您正在使用JavaScript API和jQuery的混合访问DOM元素。 如果坚持使用，它会更干净，并且代码也更易于阅读。 请看下面。
...
var firstQuestion = $('[name="firstQuestion"]');
var secondQuestion = $('[name="seconQuestion"]');
var thirdQuestion = $('[name="thirdQuestion"]');;
var score = 0;
var score2 = 0;
var score3 = 0;
var firstPara = $("#firstPara");
var secondPara = $("#secondPara");
function submitted() {
for (var o = 0; o < firstQuestion.length; o++) {
var num = o + 1;
var name = "choice" + num;
if (($('#' + name).getAttribute("value") == "true") && ($('#' + name).checked))
{
score++;
$("#correctScore").text(score);
$("#firstPara").html($("#firstPara").html() + "You got question 1 right!<br>");
break;
}
}
if (score == 0)
{
$("#secondPara").html($("#secondPara").html() + "You got question 1 wrong!<br>");
}
//question 2
for (var o = 3; o < secondQuestion.length + 3; o++) {
var num = o + 1;
var name = "choice" + num;
if (($('#' + name).getAttribute("value") == "true") && ($('#' + name).checked))
{
score++;
score2++;
$("#correctScore").text(score);
$("#firstPara").html($("#firstPara").html() + "You got question 2 right!<br>");
break;
}
}
if (score2 == 0)
{
$("#secondPara").html($("#secondPara").html() + "You got question 2 wrong!<br>");
;
}
//question 3
for (var o = 6; o < thirdQuestion.length + 6; o++) {
var num = o + 1;
var name = "choice" + num;
if (($('#' + name).getAttribute("value") == "true") && ($('#' + name).checked))
{
score++;
score3++;
$("#correctScore").text(score);
$("#firstPara").html($("#firstPara").html() + "You got question 3 right!<br>");
break;
}
}
if (score3 == 0)
{
$("#secondPara").html($("#secondPara").html() + "You got question 3 wrong!<br>");
;
$("#correctScore").text(0);
}
}
...
请在此处发布完整的HTML代码，以便更轻松地更正它。
阅读您的说明并仔细阅读代码后，以下是我的建议。
<p id="correctScreen">Correct Answers:<span id="correctScore"></span></p>
<p id="" style="font-size: 20;color: azure;margin-left: 60%;"></p>
<p id="wrongScreen">Wrong Answers:<span id="wrongScore"></span></p>
<p id="secondPara" style="font-size: 20;color: azure; margin-left: 60%;"></p>
CorrectScore跨度是您希望显示“ You got ...”文本的位置，只需替换$("#correctScore").text(score);即可完成此操作$("#correctScore").text(score); 与$("#correctScore").text("You got question 1 right"); （显然，您希望重命名元素和变量，以便在替换时有意义）。
唯一的问题是，文本的下一行（问题2的文本）将与“正确答案”而不是问题1的文本垂直对齐。 解决此问题的最简单方法（并不是真正的专业方法）是添加一堆 字符来缩进文本。 以下是一些其他（更好）的选项。
只需使用HTML标记，您就可以用一个块元素（例如div替换该范围（并将您的correctScreen从p更改为div以使其工作）。 要注意的是，切换到block元素还意味着内容将从新行开始，因此它们不会像您想要的那样在“正确答案：”旁边-除非您使用float: left （并进行了其他更改，例如为div指定width属性。）
或者由于页面具有引导程序，您可以避免自己处理（其中的）一些详细信息，并通过执行以下操作来使两个div并排显示：
<div class="row">
<div class="col-md-4" id="spacer"></div>
<div class="col-md-4" id="correctAnswersIntro">Correct answers:</div>
<div class="col-md-4" id="correctAnswersList">You got question 1 right<br></div>
</div>
停止在Visual Studio中创建的html＆javascript cordova应用程序中弹出键盘
[英]stop the keyboard popping up in html&javascript cordova app created in Visual Studio
.js中的Javascript函数无法在.html中获取getElementById
[英]Javascript function in a .js cannot getElementById in the .html
Javascript：HTML5 Canvas和ID循环使用getElementById
[英]Javascript : HTML5 Canvas and id loop with getElementById
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.