0
237
Viewshow to load function into div? js
Basically I need to load dynamically buttons into div and display them.
this is the code I have so far.
The problem is that I need to display it inside of div, because I need to show them in this way (like in the picture).
I tried with onload but apparently it doesn't work with div (<div id="from" onload="printBtn()">)
when i tried with iframe, the buttons shows in the wrong place.
how can i fix it?
var uniqfrom = ["Tel-Aviv", "Amsterdam", "New York", "London"];
function printBtn() {
for (var i = 0; i < uniqfrom.length; i++) {
var btn = document.createElement("button");
var t = document.createTextNode(uniqfrom[i]);
btn.appendChild(t);
document.body.appendChild(btn);
}
}body,
div {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 500px;
}
#to,
#controls,
#from {
float: left;
width: 30%;
height: 100%
}
#from {
background-color: yellow;
}
#to {
background-color: orange;
}
button {
width: 200px;
height: 50px;
font-size: 20px;
margin: 0 auto;
background-color: blue;
display: block;
color: white;
}
h1 {
text-align: center;
}
.sel {
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container">
<div id="from">
</div>
<div id="to">
</div>
</div>
</body>
</html>
·
Juan Pablo Isaza
1 answers
Answer question0
Get the DIVs that you want to put the buttons into, and append the buttons there instead of document.body.
var uniqfrom = ["Tel-Aviv", "Amsterdam", "New York", "London"];
function printBtn() {
let from = document.getElementById("from");
let to = document.getElementById("to");
for (var i = 0; i < uniqfrom.length; i++) {
var btn = document.createElement("button");
var t = document.createTextNode(uniqfrom[i]);
btn.appendChild(t);
from.appendChild(btn);
if (i > 0) {
btn = btn.cloneNode(true);
to.appendChild(btn);
}
}
}
printBtn();body,
div {
margin: 0px;
padding: 0px;
}
#container {
width: 100%;
height: 500px;
}
#to,
#controls,
#from {
float: left;
width: 30%;
height: 100%
}
#from {
background-color: yellow;
}
#to {
background-color: orange;
}
button {
width: 200px;
height: 50px;
font-size: 20px;
margin: 0 auto;
background-color: blue;
display: block;
color: white;
}
h1 {
text-align: center;
}
.sel {
color: red;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div id="container">
<div id="from">
</div>
<div id="to">
</div>
</div>
</body>
</html>
·
Juan Pablo Isaza
Report
Answer question