在单击按钮时调用javascript函数_Javascript_Html_Function

在单击按钮时调用javascript函数

javascript html function

在单击按钮时调用javascript函数,javascript,html,function,Javascript,Html,Function,注意：我已经正确地关闭了我的div标记，代码太长，因此发布了主要代码段我尝试了onclick事件，但表没有显示，因此我将代码改回了原始代码 <body> <button onclick="fetchAndDisplayData()">Click me</button> <table id="id01" class='table table-bordered table-striped'>

注意：我已经正确地关闭了我的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>


点击我
标题
函数fetchAndDisplayData（）{
var xmlhttp=new XMLHttpRequest（）；
变量url=”http://localhost:8888/api/get/read1.php";
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var myArr=JSON.parse（this.responseText）；
myFunction（myArr）；
}
};
open（“GET”，url，true）；
xmlhttp.send（）；
函数myFunction（arr）{
var out=“”；
var i；
对于（i=0；i'；
out+=''+arr[i]。记录时间+'
；
out+=''；
}
document.getElementById（“#id01 tbody”）.innerHTML=out；
}
}

我想要一个按钮，只有当我点击按钮时，我才能得到这些条目。我可以做什么改变？请帮我查一下密码。它是用于项目的。

您的脚本必须修改如下：


var show=true；
函数fetchAndDisplayData（）{
如果（显示）{
show=false
var xmlhttp=new XMLHttpRequest（）；
变量url=”http://localhost:8888/api/get/read1.php";
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var myArr=JSON.parse（this.responseText）；
myFunction（myArr）；
}
};
open（“GET”，url，true）；
xmlhttp.send（）；
}否则{
show=true；
myFunction（[]）；
}
}
函数myFunction（arr）{
var out=“”；
var i；
对于（i=0；i'；
out+=''+arr[i]。记录时间+'
；
out+=''；
}
document.getElementById（“id01”）.getElementsByTagName（'tbody'）[0]。innerHTML=out；
}
fetchAndDisplayData（）；

您的按钮应具有以下处理程序代码：

点击我

但是，您的代码中还有其他错误（请参阅我上面的评论），我想这些更改不会使它立即工作。

您的脚本必须按如下方式修改：


var show=true；
函数fetchAndDisplayData（）{
如果（显示）{
show=false
var xmlhttp=new XMLHttpRequest（）；
变量url=”http://localhost:8888/api/get/read1.php";
xmlhttp.onreadystatechange=函数（）{
if（this.readyState==4&&this.status==200）{
var myArr=JSON.parse（this.responseText）；
myFunction（myArr）；
}
};
open（“GET”，url，true）；
xmlhttp.send（）；
}否则{
show=true；
myFunction（[]）；
}
}
函数myFunction（arr）{
var out=“”；
var i；
对于（i=0；i'；
out+=''+arr[i]。记录时间+'
；
out+=''；
}
document.getElementById（“id01”）.getElementsByTagName（'tbody'）[0]。innerHTML=out；
}
fetchAndDisplayData（）；

您的按钮应具有以下处理程序代码：

点击我

但是您的代码中还有其他错误（请参阅我上面的评论），我想这些更改不会立即起作用。

您正在将变量

out

中的HTML代码分配给事件处理程序

onclick

？您是指

innerHTML

而不是

onclick

？否，请检查更新的代码。有一个叫“单击我”的按钮。我只想在点击按钮@alxy时显示description和log time等表值。您需要将整个代码（从

var xmlhttp…

到脚本末尾）包装到新函数中，然后在该按钮的

onclick

事件处理程序中调用它。不过，另一部分是无效的——您无法将HTML分配给

.onclick

事件处理程序，这是没有意义的。它没有显示任何数据，我收到了以下错误：@alx test.HTML:104 Uncaught TypeError:无法在XMLHttpRequest.xmlhttp.onreadystatechange的myFunction（test.HTML:104）上设置null的属性“onclick”（test.html:84）您正在将变量

out

中的HTML代码分配给事件处理程序

onclick

？您的意思是

innerHTML

而不是

onclick

？否，请检查更新的代码。有一个名为“单击我”的按钮。我只想在单击按钮@alxy时显示表中的值，如“描述”和“日志时间”。您需要重新包装吗将整个代码（从

var xmlhttp…

到脚本末尾）放入新函数中，然后在该按钮的

onclick

事件处理程序中调用它。不过，另一部分是无效的——您无法将HTML分配给

。onclick

事件处理程序，这没有任何意义。它没有显示任何数据，我遇到了以下错误：@alx test.html:104 Uncaught TypeError:无法在XMLHttpRequest.xmlhttp.onreadystatechange（test.html:84）的myFunction（test.html:104）上设置null的属性“onclick”嗨，它仍然没有显示数据。错误：test.html:104 Uncaught TypeError:无法在myFunction（test.html:104）上设置null的属性“onclick”在XMLHttpRequest.xmlhttp.onreadystatechange（test.html:84）我复制粘贴了你的代码，而你在选择器中删除了

id01

之前的

，这就是你看到错误的原因。下一步你可能会想用

.onclick

替换

。innerHTML

。只需在这里为你节省一次往返行程。仍然一样。你能再次检查吗，我相信这里有一个愚蠢的错误