CODEWITHSUNDEEP
javascripthtml
secretTina
secretTina

Reputation: 25

Why is "<br>" displaying instead of causing a break

This question has been asked, I apologize but I'm not seeing an answer to my question. I am trying to display results to a text box and when I use "<br>" it is actually writing out br instead of creating a line break

I'm displaying to a text box

here is the html for it

<input type ="text" name="display" id="display"  class="display" readonly>

This is the javascript I'm using

document.getElementById("display").value = "The highest test score is: " + max  + "<br>"+
   "The lowest test score is: " + min + "<br>" +
   "The average test score is: " + avg + "<br>" +
   "The scores are: " + results;

I've used this before but I've displayed to a <p> and it worked. Is it something with the input type??

Upvotes: 0

Views: 4697

Answers (3)

Gerald de los Santos
Gerald de los Santos

Reputation: 1

Use textarea instead of input type="text" add "cols" and "rows" attribute on your own preference and then replace br tag with the "\n".

<textarea id="display" cols="15" rows="5" ></textarea>


document.getElementById("display").value = "The highest test score is: " + max  + "\n"+
   "The lowest test score is: " + min + "\n" +
   "The average test score is: " + avg + "\n" +
   "The scores are: " + results;

Upvotes: 0

Fabien M&#233;nager
Fabien M&#233;nager

Reputation: 140205

<input type="text" /> can only contain single line text, you should use a textarea element instead, which can contain multiple lines, like this :

<textarea>
this 
is 
some text
</textarea>

Note that setting textarea.value will work too.

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382170

The value of a text box isn't interpreted as HTML.

A solution here is to use \n:

document.getElementById("display").value = "The highest test score is: " + max  + "\n"+
   "The lowest test score is: " + min + "\n" +
   "The average test score is: " + avg + "\n" +
   "The scores are: " + results;

But you probably should have a textarea here instead of an input, as you want to display several lines.

Upvotes: 3

Related Questions