Solution 1 :

It’s generally not a good idea to use inline event handlers. Here’s a snippet that adds the input value to paragraph (p#para) and empties the input element on clicking button#sendBttn. The value is wrapped in a div, a block level element, meaning it will always start on a new ‘line’. 1

1 You can also end a value string with <br>, but in that case you can not use a innerText, createTextNode or textContent.

document.addEventListener("click", printValue);

function printValue(evt) {
  // only do stuff when the button was clicked
  if (evt.target.id === "sendBttn") {
    const inputEl = document.querySelector("input#fname");
    const value = inputEl.value.trim();
    // value may be empty
    if (value) {
      // create an block element
      const newLine = document.createElement("div");
      // fill with the value
      newLine.textContent = "Sent: " + value;
      // append it to the existing paragraph
      document.querySelector("#para").appendChild(newLine);
      // reset input value
      inputEl.value = "";
      // focus back to the input field
      inputEl.focus();
    }
  }
}
body {
  font: normal 12px/15px verdana, arial;
  margin: 2rem;
}

#para div {
  padding: 2px 3px;
  border: 1px solid #eee;
  max-width: 500px;
  margin: 2px;
}
<input type="text" id="fname" name="fname">
<button type="button" id="sendBttn">SEND</button>
<p id="para"></p>

Solution 2 :

<input type="text" id="fname" name="fname">

<button type = "button" onclick = "prtText('fname')">SEND</button>

<p id="para"></p>

<script>

var node = document.createElement("P");

function prtText(addr)
{
var txt = 'n'+ document.getElementById(addr).value ;
document.getElementById("para").innerText+= txt;
}

</script>

Here you go. HTML elements have property innerText which allows you to edit contents of element. Beware that it will change inside elements if there are any.

Solution 3 :

That happens because new lines are transformed into spaces in HTML. For example:

<p>
  This is a sentence. Sometimes sentences get too big to
  fit inside a single line, so we break the line in two.
</p>

In the above example, the text node inside the <p> element, has a newline, but the rendered output doesn’t break there.

Line breaks in HTML are made using the <br> element.

<p>
  This sentence is in the first line.<br>
  This one is in the second.
</p>

You could use document.createElement("br") and append the element between two text nodes to create two lines, but there’s a simpler way, innerText.

const elem = document.getElementById("demo");

elem.innerText = "First linenSecond line"
<p id="demo"></p>

Problem :

I’m trying add a newline after some text every time a button is pressed. Here is the part of HTML file concerning the question –

<input type="text" id="fname" name="fname">

<button type = "button" onclick = "prtText('fname')">SEND</button>

<p id="para"></p>

<script>

var node = document.createElement("P");

function prtText(addr)
{
var x = document.getElementById(addr).value;
var txt = x + 'n'
var textnode = document.createTextNode(txt);

node.appendChild(textnode);
document.getElementById("para").appendChild(node);
}

</script>

Now, when I run the HTML file, every time I press the button, the text on the input box should get printed with a newline. Like this-

ExampleText
ExampleText

But it gets printed something like this-
ExampleText ExampleText.

I have tried the other method like this – var txt = x + '<br/>', but it prints like this – ExampleText<br/>ExampleText<br/> and doesn’t print a line break.

What do I do?

Comments

Comment posted by NotMyName

@DNT, the

Comment posted by stackoverflow.com/a/9492675/12734467

Maybe you’re looking for this:

Comment posted by NotMyName

Thank you for elaborating the code! Just realized using Inline event handlers makes the code really messy and its a good idea to use event listeners! P.S: I’m keeping the CSS code.

Comment posted by NotMyName

For some reason, it still gives me

Comment posted by matek997

What is the code for element with id ‘para’? What tag, what styles are applied?

Comment posted by matek997

@NotMyName i’ve edited my answer to have running code. It works, problem must be somewhere else for you.

Comment posted by NotMyName

It works after adding the

Comment posted by matek997

@NotMyName “+=” shorthand for adding something (concatenating here). You can write

Comment posted by NotMyName

I read through your answer and modified the code and used

Comment posted by NotMyName

I think you’re missing the += in the

By

Leave a Reply

Your email address will not be published. Required fields are marked *