My div tag collapses to a single when I run my code. why? Aren't div tags suppose to occupy the entire line? why are all the elemnts in the div tag appearing in the same line? whats the issue? I tried using other tags and multiple div tags still the same issue
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shapes</title>
<style>
body{background-color: #3A3B44; text-align: center;}
div{ color:antiquewhite; text-align: center; display:block; overflow: auto}
</style>
</head>
<body>
<div id="input1" ></div>
<div id="input2" ></div>
<div id="input3" ></div>
<div id="input4" ></div>
<script >
var input1= document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);
var input2= document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input1").appendChild(input2);
var input3= document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input1").appendChild(input3);
var input4= document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input1").appendChild(input4);
</script>
</body>
</html>```
[This is my output][1]
[1]: https://i.stack.imgur.com/1xLRT.png
Your issue is that you are appending all inputs to the same div input1
const input1 = document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);
const input2 = document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input2").appendChild(input2);
const input3 = document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input3").appendChild(input3);
const input4 = document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input4").appendChild(input4);div {
/* demo */
border: 1px solid red;
margin-bottom: 10px;
padding: 5px;
}<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<div id="input4"></div>You can improve this code by using a for loop
for (i = 1; i < 5; i++) {
const input = document.createElement("input");
input.setAttribute("type", "text");
document.getElementById(`input${i}`).appendChild(input);
}div {
/* demo */
border: 1px solid red;
margin-bottom: 10px;
padding: 5px;
}<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<div id="input4"></div>The problem is that you're adding all your <input> elements to the same <div> element.
Try something like that:
var input1 = document.createElement("input");
input1.setAttribute("type", "text");
document.getElementById("input1").appendChild(input1);
var input2 = document.createElement("input");
input2.setAttribute("type", "text");
document.getElementById("input2").appendChild(input2);
var input3 = document.createElement("input");
input3.setAttribute("type", "text");
document.getElementById("input3").appendChild(input3);
var input4 = document.createElement("input");
input4.setAttribute("type", "text");
document.getElementById("input4").appendChild(input4);body {
background-color: #3A3B44
}
div {
color: antiquewhite;
text-align: center;
overflow: auto
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shapes</title>
</head>
<body>
<div id="input1"></div>
<div id="input2"></div>
<div id="input3"></div>
<div id="input4"></div>
</body>
</html>you need to just add div in container using bootstrap class and use the grid system like
<div class="container">
<div class="row">
<div class="col">
<--input Field -->
</div>
<div class="col">
<--input Field -->
</div>
<div class="col">
<--input Field -->
</div>
</div>
</div>