在按钮上调用javascript函数

Question

Note: I have properly closed my div tags, the code was too long, hence posted the main snippet. 注意：我已经正确关闭了div标签，代码太长，因此发布了主要代码段。

I tried with the onclick event but the table isn't showing up hence I changed my code back to original 我尝试了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>

I want a button such that only when I click on the button, then I get those entries. 我想要一个按钮，这样只有当我单击该按钮时，我才能得到这些条目。 What changes can I make? 我可以进行哪些更改？ Please help me with the code. 请帮助我的代码。 It's for a project. 这是一个项目。

Answer 1

Your script must be modified like this: 您的脚本必须像这样修改：

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

And your button should have this handler code instead: 而且您的按钮应改为具有以下处理程序代码：

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

But there are other errors in your code (see my comment above), and I guess these changes won't make it work right away. 但是您的代码中还有其他错误（请参见上面的评论），我想这些更改不会立即使它起作用。

在按钮上调用javascript函数

问题描述

1 个解决方案

解决方案1
0 2019-06-22 22:27:18

在按钮上调用javascript函数

问题描述

1 个解决方案

解决方案1 0 2019-06-22 22:27:18

解决方案1
0 2019-06-22 22:27:18