Trying to insert line break into HTML with vanilla JSWhat are valid values for the id attribute in HTML?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Retrieve the position (X,Y) of an HTML elementHow to insert an item into an array at a specific index (JavaScript)?HTML 5: Is it <br>, <br/>, or <br />?How do I pass command line arguments to a Node.js program?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?offsetting an html anchor to adjust for fixed header
Excel round 0.34 to 0.35
Why was New Asgard established at this place?
Digital signature that is only verifiable by one specific person
How to use random to choose colors
Is it possible to use just one shared folder for log shipping?
Having some issue with notation in a Hilbert space
Is the infant mortality rate among African-American babies in Youngstown, Ohio greater than that of babies in Iran?
Is a sequel allowed to start before the end of the first book?
Graphing large functions in LaTeX
How to recover a single blank shot from a film camera
Common Marsupials and Rare Antelopes
Credit card validation in C
How can I ping multiple IP addresses at the same time?
Right indicator flash-frequency has increased and rear-right bulb is out
Fibonacci sequence and other metallic sequences emerged in the form of fractions
Do my partner and son need an SSN to be dependents on my taxes?
Print the new site header
Would a 7805 5v regulator drain a 9v battery?
How is linear momentum conserved in circular motion?
How can I prevent a user from copying files on another hard drive?
Explicit song lyrics checker
How to make all magic-casting innate, but still rare?
How do I become a better writer when I hate reading?
How useful is the GRE Exam?
Trying to insert line break into HTML with vanilla JS
What are valid values for the id attribute in HTML?Convert HTML + CSS to PDF with PHP?Where should I put <script> tags in HTML markup?Retrieve the position (X,Y) of an HTML elementHow to insert an item into an array at a specific index (JavaScript)?HTML 5: Is it <br>, <br/>, or <br />?How do I pass command line arguments to a Node.js program?Redirect from an HTML pageWhy does HTML think “chucknorris” is a color?offsetting an html anchor to adjust for fixed header
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I've been coding with JavaScript for a while now and I just started using the features for adding HTML elements through JavaScript and I have a button that adds two input fields each time it's pressed. The first time the user presses the button I want the element pushed down 250px from the top, and each time have about 20px spacing, but instead of that, well you'll see when you run the code. This question not the same as append many elements because its not my real issue, my real issue is trying to get each pair of input values separated by 20px from the other one each time the button is pressed.
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>javascript html css
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
add a comment |
I've been coding with JavaScript for a while now and I just started using the features for adding HTML elements through JavaScript and I have a button that adds two input fields each time it's pressed. The first time the user presses the button I want the element pushed down 250px from the top, and each time have about 20px spacing, but instead of that, well you'll see when you run the code. This question not the same as append many elements because its not my real issue, my real issue is trying to get each pair of input values separated by 20px from the other one each time the button is pressed.
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>javascript html css
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
@Mukyuu that's just a side problem my real problem is getting the two inputs to have a line break between them each time
– The Nuthouse
Mar 25 at 4:54
did you triedmargin-left:20px;for space
– Udhay Titus
Mar 25 at 5:01
add a comment |
I've been coding with JavaScript for a while now and I just started using the features for adding HTML elements through JavaScript and I have a button that adds two input fields each time it's pressed. The first time the user presses the button I want the element pushed down 250px from the top, and each time have about 20px spacing, but instead of that, well you'll see when you run the code. This question not the same as append many elements because its not my real issue, my real issue is trying to get each pair of input values separated by 20px from the other one each time the button is pressed.
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>javascript html css
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
I've been coding with JavaScript for a while now and I just started using the features for adding HTML elements through JavaScript and I have a button that adds two input fields each time it's pressed. The first time the user presses the button I want the element pushed down 250px from the top, and each time have about 20px spacing, but instead of that, well you'll see when you run the code. This question not the same as append many elements because its not my real issue, my real issue is trying to get each pair of input values separated by 20px from the other one each time the button is pressed.
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>javascript html css
javascript html css
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
edited Mar 25 at 4:55
The Nuthouse
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
asked Mar 25 at 4:48
The NuthouseThe Nuthouse
768
768
@Mukyuu that's just a side problem my real problem is getting the two inputs to have a line break between them each time
– The Nuthouse
Mar 25 at 4:54
did you triedmargin-left:20px;for space
– Udhay Titus
Mar 25 at 5:01
add a comment |
@Mukyuu that's just a side problem my real problem is getting the two inputs to have a line break between them each time
– The Nuthouse
Mar 25 at 4:54
did you triedmargin-left:20px;for space
– Udhay Titus
Mar 25 at 5:01
@Mukyuu that's just a side problem my real problem is getting the two inputs to have a line break between them each time
– The Nuthouse
Mar 25 at 4:54
@Mukyuu that's just a side problem my real problem is getting the two inputs to have a line break between them each time
– The Nuthouse
Mar 25 at 4:54
did you tried
margin-left:20px; for space– Udhay Titus
Mar 25 at 5:01
did you tried
margin-left:20px; for space– Udhay Titus
Mar 25 at 5:01
add a comment |
1 Answer
1
active
oldest
votes
You can change the display of inputs to block
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55331404%2ftrying-to-insert-line-break-into-html-with-vanilla-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You can change the display of inputs to block
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
add a comment |
You can change the display of inputs to block
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
add a comment |
You can change the display of inputs to block
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
You can change the display of inputs to block
let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>let addN = document.getElementById("adda");
let margin = 250;
addN.addEventListener("click", () =>
let newCoordsX = document.createElement('input');
let newCoordsY = document.createElement('input');
newCoordsX.placeholder = "X value";
newCoordsY.placeholder = "Y value";
newCoordsX.style.marginTop = margin + "px";
newCoordsX.style.display = "block"
newCoordsY.style.display = "block"
document.body.appendChild(newCoordsX);
document.body.appendChild(newCoordsY);
);#adda
position:absolute;
top:140px;
/*left:-1300px;*/
left: 0px;
width:180px;
height:40px;
padding:5px;
background-color:rgb(171, 202, 252);
border-radius:15px;
#add
position:absolute;
color:white;
font-weight:bold;
font-size:21px;
left:14px;
top:10px;
#adda:hover
cursor:pointer;
background-color:rgb(191, 215, 252);
<div id="adda">
<div id="add">Add another node</div>
</div>answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
answered Mar 25 at 5:01
Maheer AliMaheer Ali
21.6k41937
21.6k41937
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55331404%2ftrying-to-insert-line-break-into-html-with-vanilla-js%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
@Mukyuu that's just a side problem my real problem is getting the two inputs to have a line break between them each time
– The Nuthouse
Mar 25 at 4:54
did you tried
margin-left:20px;for space– Udhay Titus
Mar 25 at 5:01