按鈕未以HTML顯示

Question

我一直在研究測驗應用程序，但遇到了一個問題。 我的目標是在單擊復選按鈕時使該按鈕顯示，但它根本不起作用。

 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> 

Answer 1

我剛剛更改了一些自己的代碼，請嘗試以下操作：

 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>"; document.getElementById("result").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; 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 showResult(correct) { if (correct === true) { document.getElementById("Result").style.display = "block"; } } 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; display: none; } #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>