Вызов функции JavaScript по нажатию кнопки - PullRequest
Новая
       0

Вызов функции JavaScript по нажатию кнопки

1 голос
/ 23 июня 2019

Примечание. Я правильно закрыл теги div, код был слишком длинным, поэтому я разместил основной фрагмент кода.

Я пытался с событием onclick, но таблица не отображается, поэтому я изменил свой код обратно на оригинальный 

<body>




<button onclick="fetchAndDisplayData()">Click me</button>
                      <table id="id01" class='table table-bordered table-striped'>
                        <tbody>
                        <thead>

                          <tr>
                            <th>Title </th>

                            </tr>
                    </thead>
                        </tbody>
                      </table>
<script>
  function fetchAndDisplayData() {
var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8888/api/get/read1.php";

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myArr = JSON.parse(this.responseText);
        myFunction(myArr);
    }

};
xmlhttp.open("GET", url, true);
xmlhttp.send();
  function myFunction(arr) {
      var out = "";
      var i;
      for (i = 0; i < arr.length; i++) {
          out += '<tr><td><a href="' + arr[i].link + '">' +
              arr[i].title + '</a></td>';
          out += '<td>' + arr[i].description + '<br></td>';
          out += '<td>' + arr[i].log_time + '<br></td>';
          out += '<td><a href="' + arr[i].link + '">' +
              arr[i].link + '</a></td></tr>';
      }

      document.getElementById("#id01 tbody").innerHTML = out;

}
}
  </script>

</body>

Мне нужна такая кнопка, чтобы только когда я нажимал на кнопку, я получал эти записи. Какие изменения я могу сделать? Пожалуйста, помогите мне с кодом. Это для проекта.

1 Ответ

0 голосов
/ 23 июня 2019

Ваш скрипт должен быть изменен следующим образом: 

<script>
var show = true;

function fetchAndDisplayData() {
    if (show) {
        show = false
        var xmlhttp = new XMLHttpRequest();
        var url = "http://localhost:8888/api/get/read1.php";

        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                var myArr = JSON.parse(this.responseText);
                myFunction(myArr);
            }

        };
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    } else {
        show = true;
        myFunction([]);
    }
}

function myFunction(arr) {
    var out = "";
    var i;
    for (i = 0; i < arr.length; i++) {
        out += '<tr><td><a href="' + arr[i].link + '">' +
            arr[i].title + '</a></td>';
        out += '<td>' + arr[i].description + '<br></td>';
        out += '<td>' + arr[i].log_time + '<br></td>';
        out += '<td><a href="' + arr[i].link + '">' +
            arr[i].link + '</a></td></tr>';
    }
    document.getElementById("id01").getElementsByTagName('tbody')[0].innerHTML = out;
}

fetchAndDisplayData();
</script>

И ваша кнопка должна иметь вместо этого код обработчика: 

<button onclick="fetchAndDisplayData()">Click me</button>

Но в вашем коде есть другие ошибки (см. Мойкомментарий выше), и я думаю, что эти изменения не заставят его работать сразу.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...