отобразите имя на html-странице, нажав на кнопку. Кнопка создается с использованием данных из базы данных

ProgramBox

отобразите имя на html-странице, нажав на кнопку. Кнопка создается с использованием данных из базы данных

Post author:admin
Запись опубликована:12 января, 2022
Post category:Вопросы по программированию

#javascript #html #node.js

Вопрос:

У меня есть кнопка, которая создается с использованием информации базы данных. Например, если я вставлю имя «джон» в возрасте 15 лет в базу данных, на html-странице будет сгенерирована кнопка с текстом «джон» вместе с его возрастом. Это делается с помощью функции appendData, и кнопки отображаются путем перебора данных и добавления их на html-страницу.

Я хочу, чтобы это было так, чтобы, если я нажму на кнопку с текстом «джон», у меня будет отображаться слово «джон» и 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;
}

Ответ №1:

Быстрый способ исправить это-не передавать объект, а просто значение i в функции ShowInfo:

 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;
}

1. Я пытался это сделать, но, к сожалению, у меня это не работает. Я попытался нажать на кнопку, но в div ничего не появляется

2. Вы можете видеть, что это работает в этом JSFiddle: jsfiddle.net/3rukaz91/1 . Есть ли что-то другое в вашем коде?

3. У меня есть выборка, которая получает информацию из базы данных sql. Я попытался сравнить наши коды, и ошибка появляется только тогда, когда я изменяю данные = [{имя человека:»хенк», возраст:33}, {имя человека:»вим», возраст:34}] с помощью выборки для получения данных

4. Вы, наверное, не ждете, пока закончится доставка? Вам придется включить код выборки в свой вопрос, иначе трудно понять, что вы упускаете.

5. Я думаю, что вы не сохраняете data глобально, поэтому в showInfo функции данные не найдены. Вы можете исправить это, «сохранив» данные в глобальной области в начале appendData

Ответ №2:

я только что создал ectra div с идентификатором «contentFromUrl» при первой загрузке страницы и вызове api, чтобы он заполнял данные в div, а при повторном нажатии кнопки fetch заполнял данные.

я предоставил два случая, которые вам нравятся, вы можете выбрать!

 <div id="myData" ></div>
<div id="contentFromUrl"></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>';
                document.getElementById("contentFromUrl").innerHTML = data[i].person_name  data[i].age;
                mainContainer.appendChild(div);
            }
        }

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