Question

我正在从多个URL中获取一些JSON数据。我将它们显示在表格中。它还为每一行创建按钮。单击动态创建的按钮之一时，我想弹出一个模式窗口。我正在使用HTML，CSS和纯JavaScript。

此处是HTML代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="ajax_json.css">
        <title>Learning with AJAX and JSON</title>
    </head>
    <body>
        <header>
            <h1>JSON and AJAX</h1>
            <button id="btn">Fetch Info for 3 New Animals</button>
        </header>
        <button id="xyz">Submit</button>
        <div id="animal-info">
            <div id="myModal" class="modal">
            <div class="modal-content">
                <span class="close">&times;</span>
                <p id="modal-data">Some text in the Modal..</p>
            </div>
        </div>
    </div>
</body>
    <script src="table.js"></script>
</html>

此处是CSS代码：

html, body {
     padding: 0;
     margin: 0;
}
 .hide-me {
     visibility: hidden;
     opacity: 0;
     transform: scale(.75);
}
 h1 {
     margin-top: 0;
     font-size: 2.4em;
     font-weight: normal;
     display: inline-block;
}
 body {
     font-family: Helvetica, sans-serif;
     padding: 50px 10%;
}
 button {
     background-color: #000000;
     color: #FFF;
     border: none;
     padding: 7px 10px;
     font-size: 10px;
     border-radius: 5px;
     outline: none;
     box-shadow: 0 0 0 0;
     margin-bottom: 8px;
     margin-left: 10px;
     position: relative;
}
 button:hover {
     background-color: #034F66;
}

 #tbo {
     border-collapse: collapse;
     min-width: 500px;
}
 .modal {
     display: none;
     position: fixed;
     z-index: 1;
     padding-top: 100px;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     overflow: auto;
     background-color: rgb(0,0,0);
     background-color: rgba(0,0,0,0.4);
}
 .modal-content {
     background-color: #fefefe;
     margin: auto;
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
}
 .close {
     color: #aaaaaa;
     float: right;
     font-size: 28px;
     font-weight: bold;
}
 .close:hover, .close:focus {
     color: #000;
     text-decoration: none;
     cursor: pointer;
}

，JavaScript代码在此处：

var txt = "<table id='tbo' border='1'><tr><th>Animal Name</th><th>Species</th><th>Likes</th><th>Dislikes</th><th>Action</th></tr>";
var pageCounter = 1; 
var btnCounter = 1;
var btn = document.getElementById("btn");

var modal = document.getElementById("myModal");
var span = document.getElementsByClassName("close")[0];
var para = document.getElementById("modal-data");
var dataOne = "";
var dataTwo = "";
var dataThree = "";
var dataFour = "";
var dataFive = "";
var dataSix = "";
var dataSeven = "";
var dataEight = "";
var dataNine = "";
var button = document.getElementById("xyz");

button.onclick = function(){
    modal.style.display = "block";
}
span.onclick = function() {
    modal.style.display = "none";
}

window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

btn.addEventListener("click", function () {
    var ourRequest = new XMLHttpRequest();

    ourRequest.open("GET", "https://learnwebcode.github.io/json-example/animals-" + pageCounter + ".json");

    ourRequest.onload = function () {
        var ourData = JSON.parse(ourRequest.responseText);
        renderHTML(ourData);
    }

    ourRequest.send();
    pageCounter++;

    if (pageCounter > 3){
        btn.classList.add("hide-me");
    }
});

function renderHTML(data) {

        for (x in data) {
            txt += "<tr><td>" + data[x].name + "</td><td>" + data[x].species + 
                "</td><td>" + data[x].foods.likes + "</td><td>" + data[x].foods.dislikes + 
                "</td><td><button id='abc" + btnCounter + "'>Display</button></td></tr>";
                if (btnCounter == 1){
                    dataOne = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 2){
                    dataTwo = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 3){
                    dataThree = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 4){
                    dataFour = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 5){
                    dataFive = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 6){
                    dataSix = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 7){
                    dataSeven = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 8){
                    dataEight = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                } else if (btnCounter == 9){
                    dataNine = "It is a " + data[x].species + ". The name is " + data[x].name + ". It likes to eat "
                    + data[x].foods.likes + " and dislikes " + data[x].foods.dislikes + ".";
                }

            btnCounter++;
        }
        document.getElementById("animal-info").innerHTML = txt;

            var btnOne = document.getElementById("abc1");
            var btnTwo = document.getElementById("abc2");
            var btnThree = document.getElementById("abc3");
            var btnFour = document.getElementById("abc4");
            var btnFive = document.getElementById("abc5");
            var btnSix = document.getElementById("abc6");
            var btnSeven = document.getElementById("abc7");
            var btnEight = document.getElementById("abc8");
            var btnNine = document.getElementById("abc9");

        if ((pageCounter == 2) || (pageCounter == 3) || (pageCounter == 4)) {

            btnOne.onclick = function() {
                modal.style.display = "block";
                console.log(dataOne);
            }

            btnTwo.onclick = function() {
                modal.style.display = "block";
                console.log(dataTwo);
            }

            btnThree.onclick = function() {
                modal.style.display = "block";
                console.log(dataThree);
            }

            if (pageCounter == 3) {

                btnFour.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataFour);
                }

                btnFive.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataFive);
                }

                btnSix.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataSix);
                }

            } else if (pageCounter == 4){

                btnFour.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataFour);
                }

                btnFive.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataFive);
                }

                btnSix.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataSix);
                }

                btnSeven.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataSeven);
                }

                btnEight.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataEight);
                }

                btnNine.onclick = function() {
                    modal.style.display = "block";
                    console.log(dataNine);
                }
            }

        span.onclick = function() {
            modal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    }
}

您可以从此处查看该程序的运行情况： https://jsfiddle.net/asad2195/d9wv40t6/40/

在单击获取3只动物的信息之前，当我们单击“提交”按钮时，它将弹出“模态”窗口，但是在单击“获取3只动物的信息”之后，它将创建三个带有一些详细信息的按钮，但现在提交按钮无法像以前那样工作。

当我单击动态创建的按钮时，我希望代码打开模式窗口。（“提交”按钮只是显示我想要做的事情。）

Answer 1

当您覆盖父div的document.getElementById("animal-info").innerHTML时，您正在擦除模式。

您只需要将模态移出“ animal-info” div，就像这样：https://jsfiddle.net/sa2gt79x/

如何使用动态添加的按钮打开模式窗口-纯JavaScript

1 个答案: