Javascript，等級乘法選項

Question

我已經閱讀了很多主題，但我仍然不知道必須寫什麼來使我的check（）工作。

當你選擇一個選項時，它會產生多個問題（1×1 1×2等），那麼用戶需要填寫正確的答案，當按下提交按鈕時，它需要讓好答案爲綠色而不好的答案是紅色的。

我嘗試了很多方法，但這次我只是看不到它哈哈。誰能告訴我，或把我的什麼，我需要在我的計算（）寫

得益於正確的方向幫助:)

<div id="section"> 
 
    <h2>De toets</h2> 
 
    <p>Welke toets wil je maken?</p> 
 
    <label for="toetsmenu"></label> 
 
    <select id="toetsmenu" onchange="toets()"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    </select> 
 
    <div id="toetsding"></div> 
 
    <script> 
 
    function toets() { 
 
     var x = document.getElementById("toetsmenu").value; 
 

 
     document.getElementById("toetsding").innerHTML = ""; 
 
     for (i = 1; i < 11; i++) { 
 
     document.getElementById("toetsding").innerHTML += x + " x " + i + 
 
      " = <input type='text' id='test'>" + "<br>"; 
 
     } 
 
     document.getElementById("toetsding").innerHTML += "<input type='submit' value='check' id='sub' onclick='calc()'>" 
 
    } 
 

 
    function calc() { 
 

 
    } 
 
    </script> 
 
</div>

Answer 1

當創建您的<input>元素需要給他們每人一個唯一的ID：id='test" + i + "

在calc()功能，您可以然後只需在循環通過他們的ID訪問和檢查結果

function toets() { 
 
    var x = document.getElementById("toetsmenu").value; 
 

 
    document.getElementById("toetsding").innerHTML = ""; 
 
    for (i = 1; i < 11; i++) { 
 
    document.getElementById("toetsding").innerHTML += x + " x " + i + 
 
     " = <input type='text' id='test" + i + "'>" + "<br>"; 
 
    } 
 
    document.getElementById("toetsding").innerHTML += "<input type='submit' value='check' id='sub' onclick='calc()'>" 
 
} 
 

 
function calc() { 
 
    var x = document.getElementById("toetsmenu").value 
 

 
    for (i = 1; i < 11; i++) { 
 
    var input = document.getElementById("test" + i) 
 
    var result = input.value 
 
    console.log(input.value) 
 
    if (result == x * i) { 
 
     input.className = "correct" 
 
    } else { 
 
     input.className = "wrong" 
 
    } 
 
    } 
 

 
} 
 

 
toets()

.wrong { 
 
    background-color: red; 
 
} 
 
.correct { 
 
    background-color: green; 
 
}

<div id="section"> 
 
    <h2>De toets</h2> 
 
    <p>Welke toets wil je maken?</p> 
 
    <label for="toetsmenu"></label> 
 
    <select id="toetsmenu" onchange="toets()"> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    <option value="4">4</option> 
 
    <option value="5">5</option> 
 
    <option value="6">6</option> 
 
    <option value="7">7</option> 
 
    <option value="8">8</option> 
 
    <option value="9">9</option> 
 
    <option value="10">10</option> 
 
    </select> 
 
    <div id="toetsding"></div> 
 
</div>