Question

我正在从json获取数据（具有多个答案的问题）。我在每个问题后都有一个按钮，并想将按钮（按钮名称）的值更改为问题onClick的答案。以下是我的代码


    <html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="datadump.json"></script>
</head>

<body>
    <div id="cont" class="container">

    </div>
</body>
<script>
var data =[
    {
        "fields": {
            "text": "Question 1",
            "correct": "C",
            "answerA": "optA",
            "answerB": "optB",
            "answerC": "optC",
            "answerD": "optD",
        }
    },
    {
        "fields": {
            "text": "Question 2",
            "correct": "d",
            "answerA": "optA1",
            "answerB": "optB1",
            "answerC": "optC1",
            "answerD": "All of the above",
        }
    }
    ]

    var local_data = data;
    var row_data = '';
    cont.innerHTML += '&nbsp;';
    cont.innerHTML += '&nbsp;';

    for (var i = 0; i < local_data.length; i++) 
    {
        cont.innerHTML += '&nbsp;';
        cont.innerHTML += '&nbsp;';
         var newParagraph = document.createElement('h3');
        newParagraph.textContent = local_data[i]["fields"]["text"];
        document.getElementById("cont").appendChild(newParagraph);

        var a1 = document.createElement('p');
        a1.textContent = "a: "+ data[i]["fields"]["answerA"];
        document.getElementById("cont").appendChild(a1);
        var b1 = document.createElement('p');
        b1.textContent = "b: " + data[i]["fields"]["answerB"];
        document.getElementById("cont").appendChild(b1);
        var c1 = document.createElement('p');
        c1.textContent = "c: " + data[i]["fields"]["answerC"];
        document.getElementById("cont").appendChild(c1);
        var d1 = document.createElement('p');
        d1.textContent = "d: " + data[i]["fields"]["answerD"];
        document.getElementById("cont").appendChild(d1);

        cont.innerHTML += '&nbsp;';
        cont.innerHTML += '&nbsp;';


        var ans = document.createElement('h5');
        ans.textContent = "Answer: "+ data[i]["fields"]["correct"];
       // document.getElementById("cont").appendChild(ans);

        var val = data[i]["fields"]["correct"]
        var button = document.createElement('button');
        button.innerHTML = 'Click for Answer';
        document.getElementById("cont").appendChild(button);
        button.addEventListener("click", function() {
            this.innerHTML = ans.textContent;
        });
    }
</script>

</html>

我的JSON数据正在导入，该部分没有错误，我的控制台未显示任何错误，我能够在json文件的

标记中显示数据。我能够调试，我有100个问题，onClick适用于最后一个按钮，而不是每个按钮（在每个问题之后），该怎么办？

Answer 1

您的问题是由于循环时的上下文所致。如果在点击处理程序中使用this.innerHtml，它将使用适当的按钮，否则，您将在每个循环中覆盖button元素，并且它们都引用覆盖该变量的最后一个button元素。

断例

在此示例中，您将看到由于该问题它如何仅更改最后一个按钮的文本。

var data = [
  { fields: { correct: 'This is correct' } },
  { fields: { correct: 'This is correct 2' } },
  { fields: { correct: 'This is correct 3' } },
];

var local_data = data;
for (var i = 0; i < local_data.length; i++) 
{
  var button = document.createElement("button");
  button.innerHTML = "Answer "+i;
  document.getElementById("cont").appendChild(button);

  var val = data[i]["fields"]["correct"]
  var button = document.createElement('button');
  button.innerHTML = 'click me '+i;
  document.getElementById("cont").appendChild(button);
  button.addEventListener ("click", function() {
    button.innerHTML = 'change'+i;
  });
}

<div id='cont'></div>

工作示例

使用this.innerHTML代替button.innerHTML

仍然显示计数器变量将如何成为所有按钮的循环的最后一个数字，但现在它们都响应自己的单击。

var data = [
  { fields: { correct: 'This is correct' } },
  { fields: { correct: 'This is correct 2' } },
  { fields: { correct: 'This is correct 3' } },
];

var local_data = data;
for (var i = 0; i < local_data.length; i++) 
{
  var button = document.createElement("button");
  button.innerHTML = "Answer "+i;
  document.getElementById("cont").appendChild(button);

  var val = data[i]["fields"]["correct"]
  var button = document.createElement('button');
  button.innerHTML = 'click me '+i;
  document.getElementById("cont").appendChild(button);
  button.addEventListener ("click", function() {
    this.innerHTML = 'change'+i;
  });
}

<div id='cont'></div>

面向对象-更现代

这可能需要转译，具体取决于您的目标浏览器。

注意：单击一次后，您可以选择从按钮中删除该点击事件。

var data = [
  { fields: { correct: 'This is correct 1' } },
  { fields: { correct: 'This is correct 2' } },
  { fields: { correct: 'This is correct 3' } },
];

class AnswerButton {

  constructor(answer) {
    this.answer = answer;
    this.element = this.newButton();
    this.bindButton();
  }

  newButton() {
    const button = document.createElement('button');
    button.innerText = 'Click Me';
    return button;
  }

  bindButton() {
    this.element.addEventListener('click', () => {
      this.element.innerText = this.answer;
    });
  }

}

const container = document.getElementById('cont');
const buttons = data.map(data => new AnswerButton(data.fields.correct));
buttons.forEach(button => container.appendChild(button.element));

<div id='cont'></div>

在for循环内更改按钮值onClick

1 个答案:

断例

工作示例

面向对象-更现代