我想使用数组和循环（for循环）优化我的javascript代码答案

【问题标题】：i want to make my javascript code optimize using arrays and loop(for loop)我想使用数组和循环（for循环）优化我的javascript代码
【发布时间】：2021-10-11 11:55:18
【问题描述】：

我编写了一个测验页面，但我必须用 JavaScript 手动编写每个问题的代码。我想使用数组和循环（for循环）使其自动化，其中问题和答案将存储在数组中。我已经包含了我想要做的详细屏幕截图。我正面临这个问题，因为我不熟悉 JavaScript 中的数组和循环。请帮忙。

以下链接包含代码和问题 I 的所有图像

function reset(){
    window.location = "http://127.0.0.1:5500/index.html"
   
}

function showanswers(){
    window.location = "http://127.0.0.1:5500/answers.html"
    
    
}


function check1()
{

    var e = document.getElementById('check-btn');
    e.style.display = ((e.style.display!='block') ? 'none' : 'none');

    var e = document.getElementById('reset-btn');
    e.style.display = ((e.style.display!='block') ? 'block' : 'block');



//solution 1-------------------------------------------------------------    
var a=document.getElementById("solution1_1");
if((a.value=="carefully") || (a.value=="Carefully") || (a.value=="CAREFULLY"))
{
    var element = document.getElementById("solution1_1");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_1");
    element.classList.toggle("counter-right");
}
else
{
    var element = document.getElementById("counter_1");
    element.classList.toggle("counter-wrong");

    var element = document.getElementById("solution1_1");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-1');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');
}

//solution 2-------------------------------------------------------------    
var a=document.getElementById("solution1_2");
if((a.value=="careful") || (a.value=="Careful") || (a.value=="CAREFUL") )
{
    var element = document.getElementById("solution1_2");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_2");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_2");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-2');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_2");
    element.classList.toggle("counter-wrong");
}


//solution 3-------------------------------------------------------------    
var a=document.getElementById("solution1_3");
if((a.value=="quickly") || (a.value=="Quickly") || (a.value=="QUICKLY"))
{
    var element = document.getElementById("solution1_3");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_3");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_3");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-3');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_3");
    element.classList.toggle("counter-wrong");
}


//solution 4-------------------------------------------------------------    
var a=document.getElementById("solution1_4");
if((a.value=="quick") || (a.value=="Quick") || (a.value=="QUICK"))
{
    var element = document.getElementById("solution1_4");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_4");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_4");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-4');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_4");
    element.classList.toggle("counter-wrong");
}


//solution 5-------------------------------------------------------------    
var a=document.getElementById("solution1_5");
if((a.value=="tired") || (a.value=="Tired") ||(a.value=="TIRED"))
{
    var element = document.getElementById("solution1_5");
    element.classList.toggle("ex_textfield-right");

    var element = document.getElementById("counter_5");
    element.classList.toggle("counter-right");
   
}
else
{
    var element = document.getElementById("solution1_5");
    element.classList.toggle("ex_textfield-wrong");

    var e = document.getElementById('check-ans-5');
    e.style.display = ((e.style.display!='block') ? 'block' : 'none');

    var element = document.getElementById("counter_5");
    element.classList.toggle("counter-wrong");
}


}

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ol {
  margin-left: 50px;
  padding-top: 10px;
  list-style: none;
}

.heading {
  font-family: "Montserrat", sans-serif;
  padding: 20px 20px 20px 20px;
}

h3 {
  font-family: "Montserrat", sans-serif;
  padding: 0px 20px 0px 20px;
}

.link {
  padding: 20px 0px 20px 0px;
  font-family: "Montserrat", sans-serif;
}

.counter {
  background: #d1d1d1;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
}

.counter-wrong {
  background: #ce2929;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
}

.counter-right {
  background: #3bc442;
  border-radius: 50%;
  padding: 5px 10px 5px 10px;
}

.ex_textfield {
  margin-left: .25em;
  margin-right: .25em;
  border: 1px solid #999;
  font-size: 16px;
  border-radius: 4px;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  outline: 0;
  padding: 1px .5em;
  vertical-align: middle;
}

.ex_textfield-wrong {
  margin-left: .25em;
  margin-right: .25em;
  border: 1px solid #ce2929;
  border-radius: 4px;
  display: inline-block;
  font-size: 16px;
  height: 2em;
  line-height: 2em;
  outline: 0;
  padding: 1px .5em;
  vertical-align: middle;
}

.ex_textfield-right {
  margin-left: .25em;
  margin-right: .25em;
  border: none;
  color: #3bc442;
  font-weight: bolder;
  font-size: 16px;
  font-family: "Montserrat", sans-serif;
  border-radius: 4px;
  display: inline-block;
  height: 2em;
  line-height: 2em;
  outline: 0;
  padding: 1px .5em;
  vertical-align: middle;
}

.btn-container {
  width: 35%;
  padding-left: 30px;
  padding-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.check-btn {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  border: none;
  background-color: #e05252;
  color: white;
  border-radius: 5px;
}

.reset-btn {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  z-index: 2;
  border: none;
  background-color: #e05252;
  color: white;
  border-radius: 5px;
  display: none;
}

.check-btn:hover {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  border: none;
  background-color: #963636;
  color: white;
  border-radius: 5px;
}

.correct-input {
  color: #3bc442;
  font-weight: 700;
}

.show-btn {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  cursor: pointer;
  border: none;
  background-color: #e05252;
  color: white;
  border-radius: 5px;
}

.show-btn:hover {
  width: 30vh;
  padding: 10px 0px 10px 0px;
  border: none;
  background-color: #963636;
  color: white;
  border-radius: 5px;
}

.check-ans {
  padding-left: 30px;
  display: none;
}
/*# sourceMappingURL=style.css.map */

<body>

    <div class="heading-container">
        <h1 class="heading">ADVERBS AND ADJECTIVES EXERCIES:</h1>
        <h3>Exercise 1: Adverbs or Adjectives</h3>
        <h3>Choose the correct form (adjective or adverb).</h3>
    </div>

    <div class="container-fluid questions">
        <ol>
            <li class="link">
                <span id="counter_1" class="counter">1</span>
                I held the baby
                <input type="text" size="5" value="" id="solution1_1" class="ex_textfield" autocapitalize="off">
                (careful / carefully)<br>
                <p id="check-ans-1" class="check-ans"><b>Correct answer is : </b><span
                        class="correct-input">carefully</span></p>
            </li>

            <li class="link">
                <span id="counter_2" class="counter">2</span>
                Saksham is a
                <input type="text" size="5" value="" id="solution1_2" class="ex_textfield" autocapitalize="off">
                person. (careful / carefully)
                <p id="check-ans-2" class="check-ans"><b>Correct answer is : </b><span
                        class="correct-input">careful</span></p>
            </li>

            <li class="link">
                <span id="counter_3" class="counter">3</span>
                Arjun ran
                <input type="text" size="5" value="" id="solution1_3" class="ex_textfield" autocapitalize="off">
                to the hospital. (quick / quickly)
                <p id="check-ans-3" class="check-ans"><b>Correct answer is : </b><span
                        class="correct-input">quickly</span></p>
            </li>

            <li class="link">
                <span id="counter_4" class="counter">4</span>
                Rohan was
                <input type="text" size="5" value="" id="solution1_4" class="ex_textfield" autocapitalize="off">
                (quick / quickly)
                <p id="check-ans-4" class="check-ans"><b>Correct answer is : </b><span
                        class="correct-input">quick</span></p>
            </li>

            <li class="link">
                <span id="counter_5" class="counter">5</span>
                David looked
                <input type="text" size="5" value="" id="solution1_5" class="ex_textfield" autocapitalize="off">
                (tired / tiredly)
                <p id="check-ans-5" class="check-ans"><b>Correct answer is : </b><span
                        class="correct-input">tired</span></p>
            </li>
        </ol>

        <div class="btn-container">
            <button type="button" id="check-btn" value="click" onclick="check1();" class="check-btn">Check</button>
            <button type="button" id="reset-btn" value="click" onclick="reset();" class="reset-btn">Reset Test</button>
            <button type="button" id="show-btn" onclick="showanswers();" class="show-btn">Show Answers</button>
        </div>
    </div>

我面对。请参考。

https://drive.google.com/drive/folders/1G2yyeOlSsPAHsvmCa3Zyg5hYG_Gq1NfL?usp=sharing

【问题讨论】：

标签： javascript html css arrays web

【解决方案1】：

如果我们想使用循环，我们需要：

创建一个包含正确答案的数组。
使用从1 开始的索引遍历每个问题。
将索引附加到选择器。

看起来像这样：

let correctAnswers = ["carefully", "careful", "quickly", "quick", "tired"];

for (let i = 1; i <= 5; i++) {
    var a = document.getElementById("solution1_" + i);

    if (a.value.toLowerCase().trim() === correctAnswers[i - 1]) {
        var element = document.getElementById("solution1_" + i);
        element.classList.toggle("ex_textfield-right");

        var element = document.getElementById("counter_" + i);
        element.classList.toggle("counter-right");
    } else {
        var element = document.getElementById("counter_" + i);
        element.classList.toggle("counter-wrong");

        var element = document.getElementById("solution1_" + i);
        element.classList.toggle("ex_textfield-wrong");

        var e = document.getElementById("check-ans-" + i);
        e.style.display = e.style.display != "block" ? "block" : "none";
    }
}

完整代码：

function reset() {
    window.location = "http://127.0.0.1:5500/index.html";
}

function showanswers() {
    window.location = "http://127.0.0.1:5500/answers.html";
}

function check1() {
    var e = document.getElementById("check-btn");
    e.style.display = e.style.display != "block" ? "none" : "none";

    var e = document.getElementById("reset-btn");
    e.style.display = e.style.display != "block" ? "block" : "block";

    let correctAnswers = ["carefully", "careful", "quickly", "quick", "tired"];

    for (let i = 1; i <= 5; i++) {
        var a = document.getElementById("solution1_" + i);

        if (a.value.toLowerCase().trim() === correctAnswers[i - 1]) {
            var element = document.getElementById("solution1_" + i);
            element.classList.toggle("ex_textfield-right");

            var element = document.getElementById("counter_" + i);
            element.classList.toggle("counter-right");
        } else {
            var element = document.getElementById("counter_" + i);
            element.classList.toggle("counter-wrong");

            var element = document.getElementById("solution1_" + i);
            element.classList.toggle("ex_textfield-wrong");

            var e = document.getElementById("check-ans-" + i);
            e.style.display = e.style.display != "block" ? "block" : "none";
        }
    }
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

ol {
    margin-left: 50px;
    padding-top: 10px;
    list-style: none;
}

.heading {
    font-family: "Montserrat", sans-serif;
    padding: 20px 20px 20px 20px;
}

h3 {
    font-family: "Montserrat", sans-serif;
    padding: 0px 20px 0px 20px;
}

.link {
    padding: 20px 0px 20px 0px;
    font-family: "Montserrat", sans-serif;
}

.counter {
    background: #d1d1d1;
    border-radius: 50%;
    padding: 5px 10px 5px 10px;
}

.counter-wrong {
    background: #ce2929;
    border-radius: 50%;
    padding: 5px 10px 5px 10px;
}

.counter-right {
    background: #3bc442;
    border-radius: 50%;
    padding: 5px 10px 5px 10px;
}

.ex_textfield {
    margin-left: 0.25em;
    margin-right: 0.25em;
    border: 1px solid #999;
    font-size: 16px;
    border-radius: 4px;
    display: inline-block;
    height: 2em;
    line-height: 2em;
    outline: 0;
    padding: 1px 0.5em;
    vertical-align: middle;
}

.ex_textfield-wrong {
    margin-left: 0.25em;
    margin-right: 0.25em;
    border: 1px solid #ce2929;
    border-radius: 4px;
    display: inline-block;
    font-size: 16px;
    height: 2em;
    line-height: 2em;
    outline: 0;
    padding: 1px 0.5em;
    vertical-align: middle;
}

.ex_textfield-right {
    margin-left: 0.25em;
    margin-right: 0.25em;
    border: none;
    color: #3bc442;
    font-weight: bolder;
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    border-radius: 4px;
    display: inline-block;
    height: 2em;
    line-height: 2em;
    outline: 0;
    padding: 1px 0.5em;
    vertical-align: middle;
}

.btn-container {
    width: 35%;
    padding-left: 30px;
    padding-bottom: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.check-btn {
    width: 30vh;
    padding: 10px 0px 10px 0px;
    cursor: pointer;
    border: none;
    background-color: #e05252;
    color: white;
    border-radius: 5px;
}

.reset-btn {
    width: 30vh;
    padding: 10px 0px 10px 0px;
    cursor: pointer;
    z-index: 2;
    border: none;
    background-color: #e05252;
    color: white;
    border-radius: 5px;
    display: none;
}

.check-btn:hover {
    width: 30vh;
    padding: 10px 0px 10px 0px;
    border: none;
    background-color: #963636;
    color: white;
    border-radius: 5px;
}

.correct-input {
    color: #3bc442;
    font-weight: 700;
}

.show-btn {
    width: 30vh;
    padding: 10px 0px 10px 0px;
    cursor: pointer;
    border: none;
    background-color: #e05252;
    color: white;
    border-radius: 5px;
}

.show-btn:hover {
    width: 30vh;
    padding: 10px 0px 10px 0px;
    border: none;
    background-color: #963636;
    color: white;
    border-radius: 5px;
}

.check-ans {
    padding-left: 30px;
    display: none;
}
/*# sourceMappingURL=style.css.map */

<body>
    <div class="heading-container">
        <h1 class="heading">ADVERBS AND ADJECTIVES EXERCIES:</h1>
        <h3>Exercise 1: Adverbs or Adjectives</h3>
        <h3>Choose the correct form (adjective or adverb).</h3>
    </div>

    <div class="container-fluid questions">
        <ol>
            <li class="link">
                <span id="counter_1" class="counter">1</span>
                I held the baby
                <input type="text" size="5" value="" id="solution1_1" class="ex_textfield" autocapitalize="off" />
                (careful / carefully)<br />
                <p id="check-ans-1" class="check-ans"><b>Correct answer is : </b><span class="correct-input">carefully</span></p>
            </li>

            <li class="link">
                <span id="counter_2" class="counter">2</span>
                Saksham is a
                <input type="text" size="5" value="" id="solution1_2" class="ex_textfield" autocapitalize="off" />
                person. (careful / carefully)
                <p id="check-ans-2" class="check-ans"><b>Correct answer is : </b><span class="correct-input">careful</span></p>
            </li>

            <li class="link">
                <span id="counter_3" class="counter">3</span>
                Arjun ran
                <input type="text" size="5" value="" id="solution1_3" class="ex_textfield" autocapitalize="off" />
                to the hospital. (quick / quickly)
                <p id="check-ans-3" class="check-ans"><b>Correct answer is : </b><span class="correct-input">quickly</span></p>
            </li>

            <li class="link">
                <span id="counter_4" class="counter">4</span>
                Rohan was
                <input type="text" size="5" value="" id="solution1_4" class="ex_textfield" autocapitalize="off" />
                (quick / quickly)
                <p id="check-ans-4" class="check-ans"><b>Correct answer is : </b><span class="correct-input">quick</span></p>
            </li>

            <li class="link">
                <span id="counter_5" class="counter">5</span>
                David looked
                <input type="text" size="5" value="" id="solution1_5" class="ex_textfield" autocapitalize="off" />
                (tired / tiredly)
                <p id="check-ans-5" class="check-ans"><b>Correct answer is : </b><span class="correct-input">tired</span></p>
            </li>
        </ol>

        <div class="btn-container">
            <button type="button" id="check-btn" value="click" onclick="check1();" class="check-btn">Check</button>
            <button type="button" id="reset-btn" value="click" onclick="reset();" class="reset-btn">Reset Test</button>
            <button type="button" id="show-btn" onclick="showanswers();" class="show-btn">Show Answers</button>
        </div>
    </div>
</body>

【讨论】：

谢谢它正在工作，你能告诉我如何在 js 中存储问题并在 html 中加载它吗？因为有两个 html 文件，一个包含答案，另一个包含问题，我必须手动输入两个问题，所以我也想将这个概念应用到那个。
@HrithikGhutke 我不太清楚你的意思，我认为你应该发布一个新问题。
嘿，只是问......如果有两个 ans 字段，例如：- Ananta 有一个......一天，所以你能不能......？（可怕，安静）。此循环仅适用于一个输入。我必须再做一个循环吗？？
您可能需要重写代码的结构方式，可能类似于在 javascript 中动态创建和附加 html 列表项。