Question

我有一个包含10个变量和10个函数的代码。每个函数检索其中一个变量，并在单击按钮时在html页面上显示该变量。使用JavaScript，我一直在寻找一种方法将变量存储在一个数组中，然后有一个for循环循环来查找单击的按钮并检索正确的答案。

我是JavaScript的新手，但我相信数组就像

一样简单

var name = ["var0","var1","var2"...];

我的原始代码是

var ans0= "echo";
var ans1= "candle";
var ans2= "map";
var ans3= "the letter r";
function answer0(){
    document.getElementById("question1").innerHTML=ans1;
}
function answer1(){
    document.getElementById("question2").innerHTML=ans2;
}
function answer2(){
    document.getElementById("question3").innerHTML=ans3;
}
function answer3(){
    document.getElementById("question4").innerHTML=ans4;
}

基本上我知道这可以工作我只需要一些关于语法和逻辑的指导。

可能有用的另一部分信息是我的HTML代码：

<div class="questions">
                <p class="question">1. I speak without a mouth and hear without ears. I have nobody, but come alive with wind. What am I?</p><!-- echo -->
                <div class="answer-btn">
                    <input type="button" class="get" value="Answer" onclick="answer(0);">           
                </div><!--/.answer-btn -->          
                <span class="the-answer" id="question1"></span>     
            </div><!--/.questions -->

这些代码行也一遍又一遍地重复，我很高兴只需要做一次。

Answer 1

您不需要将答案存储在单独的变量中。您可以使用对象存储与您的问题相对应的答案。但是对于你的情况和简单，你可以试试这个：

var answers = ['answer1', 'answer2', 'answer3', 'etc'];

function printAnswer(questionNumber) {
  document.getElementById('question'+questionNumber).innerHTML = answers[questionNumber-1];
}

期待第一个问题调用printAnswer（1）。

Answer 2

嗯，这很容易，为你的函数添加一个参数：

function answer(n) {
  document.getElementById("question" + n).innerHTML= allAnswers [n]
}

allAnswers将在哪里

var allAnswers = ["echo","candle","map","the letter r"]

然后，您可以在HTML中为每个按钮分别添加一个侦听器，如：

 <button class="answer_btn" onclick="answer(0)"></button>
 <button class="answer_btn" onclick="answer(1)"></button>
 ....

或者，正如您的建议，您可以遍历按钮并添加监听器：

  var  buttons = document.getElementsByClassName("answer_btn")
  for(let i = 0; i < buttons.length; i++) {
  button.item(i).addEventListener('click', function()  {
    answer(i)
  })
}

请注意，您确实需要在此使用let，否则您必须使用技巧将i绑定到另一个范围：

  var  buttons = document.getElementsByClassName("answer_btn")
  for(var i = 0; i < buttons.length; i++) {
    button.item(i).addEventListener('click', (function(i) {
      return function() { answer(i) }
    }(i)))
  }

编辑：要回答您的第二个问题（如何使您的HTML更简单，无需重复），您可以使用javascript生成dom。但是，这并不意味着您的最终HTML（生成的HTML）将更简单，但代码看起来更简单，并且（可能）更容易阅读。首先，为所有问题和答案创建容器：

<div id="questions_container"></div>

在javascript中，我们将引用它并创建另一个数组来存储所有问题。

var questionsDiv = document.getElementById("questions_container")
var questionsText = ["1. ...... ?", "2. ........ ?", ...]

然后，循环遍历问题，我们将它们添加到DOM：

for(var q in questionsText) {
   questionsDiv.innerHTML += 
   '<p class="question">' + questionsText[q] + '</p>\
      <div class="answer-btn">\
         <input type="button" class="get" value="Answer" onclick="answer(' + q + ');"> \          
      </div>\
      <span class="the-answer" id="question' + (q+1) + ' </span>'
}

希望我帮助过你！

尝试使用数组和循环来连接硬件代码（已经评级，希望更进一步）

2 个答案: