按钮onclick按钮工作奇怪

button onclick button working weirdly

本文关键字：按钮 工作 onclick      更新时间：2023-09-26

我是一个前端开发新手。我目前正在javascript的ajax请求工作，试图在另一个页面添加一个html页面的表和ol。代码如下:

主HTML页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
       <!-- <script type="text/javascript" src="AjaxRequestCreatingElements.js"></script>-->
    </head>
    <body>
        <button id="ato">get all tables and ordered list's</button>
        <script type="text/javascript" src="AjaxRequestCreatingElements.js"></script>
    </body>
</html>

javascript代码中XMLHttpRequest请求的html页面

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div>
            <table>
            <tr>
            <th>sr. no</th><th>topic</th><th>comment</th></tr>
                <tr><td>1</td><td>blah blah blah from div</td><td>i dont know</td></tr>
            </table>
        </div>
        <div>
            <ol>
                <li>blah blah blah..from div</li>
                <li>other blah blah blah....</li>
                <li>and an another blah blah blah....</li>
            </ol>
        </div>
        <table>
            <tr>
            <th>sr. no</th><th>topic</th><th>comment</th></tr>
                <tr><td>1</td><td>blah blah blah</td><td>i dont know</td></tr>
            </table>
    </body>
</html>

生成ajax请求的javascript代码

var request = new XMLHttpRequest();
request.open("GET", "HtmlCopyFrom.html", true);
request.send(null);
var count = 0;
request.onreadystatechange = function ()
{
    if (request.readyState === 4 && request.status === 200)
    {
        //alert("hi ");
        var newDoc = document.implementation.createHTMLDocument("example");
        newDoc.documentElement.innerHTML = request.responseText;
        var tableElements = newDoc.getElementsByTagName('Table');
        var olElements = newDoc.getElementsByTagName('ol');
        document.getElementById("ato").onclick = function ()
        {
            //document.getElementById("ato").onclick = function ()
            for (var i = 0; i < tableElements.length; i++)
            {
                document.body.appendChild(tableElements[i]);
            }
            for (var i = 0; i < olElements.length; i++)
            {
                document.body.appendChild(olElements[i]);
            }
        }
    }
}

* *问题* *

我需要点击2次以获得此页面的所有表和ol元素。我只是想点击一次，得到所有的表和ol元素代替..

请帮助。

thanks in advance.

你的代码很奇怪。您从服务器请求数据(这是异步的)，并通过onclick事件解析它。是的，如果你的请求需要很长时间，你必须点击2次。

试着这样修改:

document.getElementById("ato").onclick = function ()
{
    var request = new XMLHttpRequest(); 
    request.open("GET", "HtmlCopyFrom.html", true); 
    request.send(null); var count = 0;     
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200)
        {
            //alert("hi ");
            var newDoc = document.implementation.createHTMLDocument("example");
            newDoc.documentElement.innerHTML = request.responseText;
            var tableElements = newDoc.getElementsByTagName('Table');
            var olElements = newDoc.getElementsByTagName('ol');
            //document.getElementById("ato").onclick = function ()
            for (var i = 0; i < tableElements.length; i++)
            {
                document.body.appendChild(tableElements[i]);
            }
            for (var i = 0; i < olElements.length; i++)
            {
                document.body.appendChild(olElements[i]);
            }
        }
    } 
}

这个应该可以工作。(不是测试你的代码)

相关文章：