0
私はクイズのアプリケーションで作業していましたが、問題が発生しました。私の目標は、チェックボタンがクリックされたときにボタンを表示させることですが、機能しません。ボタンがHTMLで表示されない
var pos = 0,
test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
["What is num equal to?", "6", "5", "Potato", "A", "A Variable is something that can store data, like a number or a String (Some text). They can be written as an int or as a string. EXAMPLE: ", "https://s1.postimg.org/nqvwnr0un/Untitled.png"],
["What is 7 x 3?", "21", "24", "25", "A"],
["What is 8/2?", "10", "2", "4", "C"]
];
function _(x) {
return document.getElementById(x);
}
function renderQuestion() {
test = _("test_q");
text = _("test_t");
if (pos >= questions.length) {
test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>";
_("test_status").innerHTML = "Test Completed";
pos = 0;
correct = 0;
return false;
}
var BarPercent = (100/questions.length) * (pos + 1);
var pb = document.getElementById("pb");
pb.style.width = BarPercent + "%";
var qresult = false;
function showResult(correct) {
if (correct === true) {
document.getElementById("Result").style.visibility = "visible";
}
}
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
info = questions[pos][5];
if (questions[pos][6] !== undefined) {
img = questions[pos][6];
} else {
img = ""
}
test.innerHTML = "<h4 style='color: #DDD;'>" + info + "</h3><br><img src='" + img + "' style='align: center; width: 50%;'>";
test.innerHTML += "<h3>" + question + "</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> " + chA + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> " + chB + "<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> " + chC + "<br><br>";
test.innerHTML += "<button id='sub_button'style='color: green; background-color: #CCC; border: 0px; width: 100%; text-align: left; font-weigth: 100px; font-size: 70px; border-radius: 20px;' onclick='checkAnswer()'>Check</button>";
}
function checkAnswer() {
choices = document.getElementsByName("choices");
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
}
}
if (choice == questions[pos][4]) {
correct++;
qresult = true;
showResult(qresult);
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);div {
border-radius: 20px;
}
#test_q {
background-color: #AAA;
padding: 10px 40px 40px 40px;
}
body {
font-family: sans-serif;
background-color: AAA;
color: #EEE;
}
#pbc {
width: 100%;
height: 16px;
background: #444;
border-radius: 10px;
margin-bottom: 20px;
}
#pbc>#pb {
position: relative;
top: 0px;
background: #1D4;
width: 0%;
height: 16px;
color: #0FF;
text-align: center;
border-radius: 10px;
}
#Result {
margin-top: 150px;
width: 100%;
height: 100px;
max-height: 100px;
background-color: lightgreen;
position: absolute;
margin-bottom: 25px;
border-radius: 20px;
border: 0px;
visibility: hidden;
}
#result {
color: green;
text-align: left;
margin-left: 20px;
}<div id="pbc">
<div id="pb">
</div>
</div>
<div id="test_q"></div>
<button id="Result" onclick="renderQuestion()">
<h1 id="result"></h1>
</button>
を： showResultは定義されていません。 'showResult'は' renderQuestion'で定義されていますが、 'checkAnswer'では' showResult'を呼び出しています。 – hungerstar