javascript - 通过单击按钮在 html 页面上显示名称。该按钮是使用数据库中的数据生成的

Question

我有一个使用数据库信息生成的按钮。例如，如果我在数据库中插入一个年龄为 15 岁的姓名“john”，则会在 html 页面上生成一个带有文本“john”及其年龄的按钮。这是使用 appendData 函数完成的，并且通过循环数据并将其附加到 html 页面上来显示按钮。

我希望这样，如果我单击带有文本“john”的按钮，我将在侧面显示单词“john”和 15。

我尝试发送数据 [i] 但它不起作用。有人可以帮忙吗？谢谢你

<div id="myData" ></div>
    <aside>
        <p>Details: </p>
        <p id="configurationdetails"></p>
    </aside>

<script>
        fetch('http://localhost:3000/result')
            .then(function (response) {
                return response.json();
            })
            .then(function (data) {
                appendData(data);
            })
            .catch(function (err) {
                console.log('error: ' + err);
            });
        function appendData(data) {
            var mainContainer = document.getElementById("myData");
            for (var i = 0; i < data.length; i++) {
                var div = document.createElement("div");

                div.innerHTML = '<div class="container"> <div class="solid"> <button id="btn" class="btn" onclick="showinfo('+data[i]+')">' + 'name '+data[i].person_name +data[i].age+  '</button> </div></div>';
                mainContainer.appendChild(div);
            }
        }

        function showinfo(info) {
  document.getElementById("configurationdetails").innerHTML = info;
}

标签： javascripthtmlnode.js

Answer 1

修复它的一种快速方法是不传递对象，而只传递ishowInfo 函数中的值：

data = [{person_name:"henk", age:33}, {person_name:"wim", age:34}]

appendData(data)

function appendData(data) {
  // save data for later
  window.data = data

  var mainContainer = document.getElementById("myData");
  for (var i = 0; i < data.length; i++) {
    var div = document.createElement("div");
    div.innerHTML = '<div class="container"> <div class="solid"> <button id="btn" class="btn" onclick="showinfo('+i+')">' + 'name '+data[i].person_name +data[i].age+  '</button> </div></div>';
    mainContainer.appendChild(div);
  }
}

function showinfo(i) {
  document.getElementById("configurationdetails").innerHTML = data[i].person_name + " " + data[i].age;
}