Я собираю некоторые данные JSON из нескольких URL.Я показываю их в таблице.Это также создает кнопки с каждой строкой.Я хотел бы открыть модальное окно, когда оно нажимает одну из динамически создаваемых кнопок.Я использую 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">×</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 животных, он создает три кнопки с некоторыми подробностями, но теперь кнопка отправки не работает, как раньше.
Я хочу, чтобы код открывал модальное окно, когда я нажимаюдинамически созданные кнопки.(Кнопка «Отправить» просто показывает, что я хотел сделать.)