2017-04-20 154 views
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>

+2

您有以下錯誤:'未捕獲的ReferenceError: showResult未定義。儘管在'renderQuestion'中定義了'showResult',你可以在'checkAnswer'中調用'showResult'。 – hungerstar

回答

0

我只是改變了一些自己的代碼, 試試這個:


 

 
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>

+0

它的工作原理!我從來沒有抓到過。我將繼續推進我的應用程序! –