我们可以从多维数组更改javascript中元素的颜色属性吗？

Question

我正在用 javascript 创建一个测验应用程序

当用户尝试将与该问题相关的按钮更改为绿色的问题时，我想将每个问题的问题托盘中按钮的颜色更改为绿色。

我使用了一个多维数组来存储问题和答案，以及用户在名为questions 的数组中选择的选项，我将值存储在questions[0][7] 中用于问题1 和questions[1][7] 用于问题2 和以此类推。

我在下面粘贴了我的代码，请提出一个实现上述结果的想法

现在在尝试任何问题时，所有按钮都将颜色变为绿色

提前致谢

var questions = [
  ["q1", "1", "2", "3", "4", "5", "A", "not"],
  ["q2", "10", "20", "30", "40", "50", "B", "not"],
  ["q3", "10", "20", "30", "40", "50", "C", "not"],
  ["q4", "10", "20", "30", "40", "50", "D", "not"]
];

var pos = 0,
  choice, correct = 0,
  rscore = 0;

window.onload = function() {
  qus();
  // setQuestionOrder()
}

function qus() {
  document.getElementById("question").innerHTML = questions[pos][0];
  document.getElementById("c1").innerHTML = questions[pos][1];
  document.getElementById("c2").innerHTML = questions[pos][2];
  document.getElementById("c3").innerHTML = questions[pos][3];
  document.getElementById("c4").innerHTML = questions[pos][4];
  document.getElementById("c5").innerHTML = questions[pos][5];
}


function next() {

  var choices = document.getElementsByName("choices");
  for (var i = 0; i < choices.length; i++) {
    if (choices[i].checked) {
      choice = choices[i].value;
    }
  }

  questions[pos][7] = choice;

  if (choice == questions[pos][6]) {
    correct++;
    // alert('correct');
  } else {
    //alert('incorrect');
  }

  if (pos + 1 >= questions.length) {
    var r = confirm("Submit test?", );
    if (r == true) {
      document.write("You got " + correct + "  correct of " + questions.length + " questions<br><br>");
      correct = "0";
      pos = "0";

    } else {

    }




    return false;

  } else {
    pos++;
    //console.log(pos, questions.length);
    qus();
    check();
  }


}


function uncheck() {
  document.getElementById("r1").checked = false;
  document.getElementById("r2").checked = false;
  document.getElementById("r3").checked = false;
  document.getElementById("r4").checked = false;
  document.getElementById("r5").checked = false;
}

function check() {
  if (questions[pos][7] == "A") {
    document.getElementById("r1").checked = true;
  } else if (questions[pos][7] == "B") {
    document.getElementById("r2").checked = true;
  } else if (questions[pos][7] == "C") {
    document.getElementById("r3").checked = true;
  } else if (questions[pos][7] == "D") {
    document.getElementById("r4").checked = true;
  } else if (questions[pos][7] == "E") {
    document.getElementById("r5").checked = true;
  } else {
    uncheck();
  }
}



function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}


function q1() {
  pos = 0;
  qus();
  check();
}

function q2() {
  pos = 1;
  qus();
  check();
}

function q3() {
  pos = 2;
  qus();
  check();
}

function q4() {
  pos = 3;
  qus();
  check();
}

/// CODE TO CHANGE COLOR

if (questions[0][7] == "A" || "B" || "C" || "D" || "E") {
  document.getElementById("q1").style = "background-color:green;"
}
else if (questions[1][7] == "not") {
  document.getElementById("q2").style = "background-color:white;"
} 
else {
  document.getElementById("q1").style = "background-color:red;"
}


if (questions[1][7] == "A" || "B" || "C" || "D" || "E") {
  document.getElementById("q2").style = "background-color:green;"
} 
else if (questions[1][7] == "not") {
  document.getElementById("q2").style = "background-color:white;"
} 
else {
  document.getElementById("q2").style = "background-color:red;"
}

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<button class="w3-button w3-light-grey w3-large w3-right" onclick="w3_open() "><i class="fa fa-bars"></i></button>



<div class="w3-sidebar w3-bar-block w3-border-left top" style="display:block; width:10%; right:0;" id="mySidebar">
  <button onclick="w3_close()" class="w3-bar-item large">Close &times;</button>
  <a href="#" onclick="q1()" class="w3-bar-item w3-button " id="q1"> 1</a>
  <a href="#" onclick="q2()" class="w3-bar-item w3-button" id="q2"> 2</a>
  <a href="#" onclick="q3()" class="w3-bar-item w3-button" id="q3"> 3</a>
  <a href="#" onclick="q4()" class="w3-bar-item w3-button" id="q4"> 4</a>
</div>




<label class="xxlarge" id="question">
    
</label><br><br>


<input type="radio" name="choices" value="A" id="r1" class="radio"><label id="c1"></label><br><br>
<input type="radio" name="choices" value="B" id="r2" class="radio"><label id="c2"></label> <br><br>
<input type="radio" name="choices" value="C" id="r3" class="radio"><label id="c3"></label><br><br>
<input type="radio" name="choices" value="D" id="r4" class="radio"><label id="c4"></label><br><br>
<input type="radio" name="choices" value="E" id="r5" class="radio"><label id="c5"></label>

<br>
<br>
<br>

<button onclick="next()" class="btn green round">Save & Next</button>

Answer 1

我将在此解决方案中使用您现有的编码风格，以便您可以轻松查看这些编辑如何解决您的问题。

但请注意，使用更多循环确实可以从中受益，这样您就不会在原始源代码中一遍又一遍地重复相同的代码、条件和赋值。

这里的主要变化是颜色更改代码现在是一个函数。此外，我修复了一个逻辑错误，即重新修改相同的正确答案并选择保存会再次错误地增加 count。

我在您的源中放置了 cmets 以显示我在何处以及做了哪些更改。

var questions = [
  ["q1", "1", "2", "3", "4", "5", "A", "not"],
  ["q2", "10", "20", "30", "40", "50", "B", "not"],
  ["q3", "10", "20", "30", "40", "50", "C", "not"],
  ["q4", "10", "20", "30", "40", "50", "D", "not"]
];

var pos = 0,
  choice, correct = 0,
  rscore = 0;

window.onload = function() {
  qus();
  // setQuestionOrder()
}

function qus() {
  document.getElementById("question").innerHTML = questions[pos][0];
  document.getElementById("c1").innerHTML = questions[pos][1];
  document.getElementById("c2").innerHTML = questions[pos][2];
  document.getElementById("c3").innerHTML = questions[pos][3];
  document.getElementById("c4").innerHTML = questions[pos][4];
  document.getElementById("c5").innerHTML = questions[pos][5];
}


function next() {

  var choices = document.getElementsByName("choices");
  for (var i = 0; i < choices.length; i++) {
    if (choices[i].checked) {
      choice = choices[i].value;
    }
  }

  questions[pos][7] = choice;



  updateAnswerHinting(); // Do your answer hinting (history) in this next function

  // Get rid of incrementing correct because if a user revisits an answer and 
  // chooses save then it will get incremented again if were correct

  /*
  if (choice == questions[pos][6]) {
    correct++;
    // alert('correct');
  } else {
    //alert('incorrect');
  }
  */

  if (pos + 1 >= questions.length) {
    var r = confirm("Submit test?", );
    if (r == true) {

      // Calculate correct since we are no longer tallying it as we go
      correct = 0;
      for (var i = 0; i < questions.length; i++) {
        if (questions[i][USER_CHOICE] == questions[i][Q_ANSWER]) correct++;
      }

      document.write("You got " + correct + "  correct of " + questions.length + " questions<br><br>");
      correct = "0";
      pos = "0";

    } else {

    }




    return false;

  } else {
    pos++;
    //console.log(pos, questions.length);
    qus();
    check();
  }


}


function uncheck() {
  // You can use a loop for this. Consider using this technique for other parts of your code

  for (var i = 0; i < 5; i++) {
    document.getElementById("r" + (i + 1)).checked = false;
  }
  /*
    document.getElementById("r1").checked = false;
    document.getElementById("r2").checked = false;
    document.getElementById("r3").checked = false;
    document.getElementById("r4").checked = false;
    document.getElementById("r5").checked = false;
  */

}

function check() {
  if (questions[pos][7] == "A") {
    document.getElementById("r1").checked = true;
  } else if (questions[pos][7] == "B") {
    document.getElementById("r2").checked = true;
  } else if (questions[pos][7] == "C") {
    document.getElementById("r3").checked = true;
  } else if (questions[pos][7] == "D") {
    document.getElementById("r4").checked = true;
  } else if (questions[pos][7] == "E") {
    document.getElementById("r5").checked = true;
  } else {
    uncheck();
  }
}



function w3_open() {
  document.getElementById("mySidebar").style.display = "block";
}

function w3_close() {
  document.getElementById("mySidebar").style.display = "none";
}

function qx(p) {
  // p is Base 1 (starts from 1)
  pos = p - 1;
  qus();
  check();
}

// These functions are no longer needed since we now have qx()
/*
function q1() {
  pos = 0;
  qus();
  check();
}

function q2() {
  pos = 1;
  qus();
  check();
}

function q3() {
  pos = 2;
  qus();
  check();
}

function q4() {
  pos = 3;
  qus();
  check();
}
*/


/// CODE TO CHANGE COLOR
const USER_CHOICE = 7;
const Q_ANSWER = 6;

function updateAnswerHinting() {
  for (var i = 0; i < questions.length; i++) {
    var color = "white";
    if (questions[i][USER_CHOICE] == questions[i][Q_ANSWER]) {
      color = "green";
    } else if (questions[i][USER_CHOICE] != "not") {
      color = "red";
    }

    // To prevent future logical errors, check if element exists
    var el = document.getElementById("q" + (i + 1));

    if (el) el.style = "background-color:" + color;
  }
}

// This code was out of place anyway
/*
if (questions[0][7] == "A" || "B" || "C" || "D" || "E") {
  document.getElementById("q1").style = "background-color:green;"
}
else if (questions[1][7] == "not") {
  document.getElementById("q2").style = "background-color:white;"
} 
else {
  document.getElementById("q1").style = "background-color:red;"
}


if (questions[1][7] == "A" || "B" || "C" || "D" || "E") {
  document.getElementById("q2").style = "background-color:green;"
} 
else if (questions[1][7] == "not") {
  document.getElementById("q2").style = "background-color:white;"
} 
else {
  document.getElementById("q2").style = "background-color:red;"
}
*/

<head>
  <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>




<body>

  <button class="w3-button w3-light-grey w3-large w3-right" onclick="w3_open() "><i class="fa fa-bars"></i></button>



  <div class="w3-sidebar w3-bar-block w3-border-left top" style="display:block; width:10%; right:0;" id="mySidebar">
    <button onclick="w3_close()" class="w3-bar-item large">Close &times;</button>
    <a href="#" onclick="qx(1)" class="w3-bar-item w3-button " id="q1"> 1</a>
    <a href="#" onclick="qx(2)" class="w3-bar-item w3-button" id="q2"> 2</a>
    <a href="#" onclick="qx(3)" class="w3-bar-item w3-button" id="q3"> 3</a>
    <a href="#" onclick="qx(4)" class="w3-bar-item w3-button" id="q4"> 4</a>
  </div>




  <label class="xxlarge" id="question">
    
</label><br><br>


  <input type="radio" name="choices" value="A" id="r1" class="radio"><label id="c1"></label><br><br>
  <input type="radio" name="choices" value="B" id="r2" class="radio"><label id="c2"></label> <br><br>
  <input type="radio" name="choices" value="C" id="r3" class="radio"><label id="c3"></label><br><br>
  <input type="radio" name="choices" value="D" id="r4" class="radio"><label id="c4"></label><br><br>
  <input type="radio" name="choices" value="E" id="r5" class="radio"><label id="c5"></label>

  <br>
  <br>
  <br>

  <button onclick="next()" class="btn green round">Save & Next</button>
</body>

另外请注意，虽然逻辑上没有必要，但我创建了这些常量以使您的源代码更具可读性，并为将来的更改做好准备：

const USER_CHOICE = 7;
const Q_ANSWER = 6;

这些是您的问题数组的索引，用于代替文字。我在放置代码的地方使用了它们。考虑将它们用于您的其余代码。

Answer 2

/// 改变颜色的代码

定义一个可能的答案数组并检查问题[0][7]中的值存储是否在该数组中，而不是您编写的逻辑。

possibleAnswers = ["A", "B", "C", "D", "E"];

if (possibleAnswers.includes(questions[0][7])) {
  document.getElementById("q1").style = "background-color:green;"
}