Create new line in document write (JavaScript)

Question

How do I make all of the items inside document.get on new lines? I've tried br/ and \n. Neither of which work. They either cause the JavaScript to run incorrectly or don't create new lines. I know I can put each in its own paragraph element but for my purposes I have to have it all in one paragraph element.

<script type="text/javascript">
<!--
    var     firstString =  prompt(" Enter the first number ", "");
    var     secondString = prompt(" Enter the second number ", "");
    var     num1 = parseFloat(firstString);
    var     num2 = parseFloat(secondString);

    var addition = num1 + num2;         //  Addition of num1 and num2
    var subtraction = num1 - num2;      //  Subtraction of num1 and num2
    var multiplication = num1 * num2;   //  Multiplication of num1 and num2
    var division = num1 / num2          //  Division of num1 and num2

    //These are the ones I'm trying to get to appear on separate lines

    document.write (
        "<p> First Value Entered: " + num1 + \n
        "Second Value Entered: " + num2 + \n
        "Sum: " + addition + \n
        "Difference: " + subtraction + \n
        "Product: " + multiplication + \n
        "Quotient: " + division + "</p>"
    );
// -->
</script>

Don't use document.write, it's part of an ancient JS API from before we had DOM manipulation functions and should never be used (and it's dangerous: it really doesn't do what you think it does). Create your stuff with document.createElement, set their content with .textContent=... (not .innerHTML, because that's just more DOM content, create it as such) and then add it to the DOM with document.body.appendChild(...) / element.appendChild(...) — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Oct 30, 2014 at 18:48
you need to talk to whoever assigned that. This is not proper HTML+JS, and hasn't been for years now. — Mike 'Pomax' Kamermans
– Mike 'Pomax' Kamermans, Commented Oct 30, 2014 at 20:28

pennstatephil · Accepted Answer · 2014-10-30 18:59:32Z

6

Put \n in quotes, like so: "\n", and don't forget to put plus signs after them too. It's one big concatenated string.

ETA: As mentioned in the other answer, pure HTML doesn't support newlines, so use <br>!

edited Oct 30, 2014 at 18:59

answered Oct 30, 2014 at 18:47

pennstatephil

1,6633 gold badges25 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

pennstatephil Over a year ago

it's trying to evaluate \n like a variable or a keyword, you want a string.

pennstatephil Over a year ago

and no, it would render as a newline, if you really wanted to render \n you'd have to escape the slash like so: "\\n"

Teemu Over a year ago

Well, you're right, it's rendered when escaped only, but \n can be seen in the outer/innerHTML only, it doesn't create a new-line to the page.

pennstatephil Over a year ago

ah, indeed. I'm used to updating fields and other elements that do support it. In pure HTML, <br>'s your solution.

Quentin · Accepted Answer · 2014-10-30 18:49:20Z

5

You need to:

quote all your string literals
put a + between each pair of strings you want to concatenate
use a <br> element instead of a literal new line (since a new line in HTML doesn't cause a line break to be rendered)

Such:

"Second Value Entered: " + num2 + "<br>" +

That said, this looks more like a job for dl/dt/dd than a paragraph with line breaks in it.

edited Oct 30, 2014 at 18:49

answered Oct 30, 2014 at 18:48

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Comments

Anastasios Selmani · Accepted Answer · 2019-03-14 13:08:25Z

<!DOCTYPE html>
<!-- JavaScript Arith - Oct. 22, 1918 -->

var name = prompt("Hello and Welcome! I'm Chip. We're going to play a little math game. What's your name?", "");

    alert("Hello, " + name + ". Please enter a number for each prompt. Please, do not use 0 for either number.")

    var answer, sum, difference, product, quotient, power = -1; // Initialize 
    // Input - Prompt for the numbers

    // Processing - the preparation for number crunching        

    // Make sure the values are numeric.var first = Number(prompt("Enter the first number", ""));       
    var first = Number(prompt("Enter the first number", ""));
    var second = Number(prompt("Enter the second number", ""));

    // Output - results 
    // Feedback - later for errors, e.g., 0, letters, etc.
    document.write(name + ", the numbers chosen were: " + first + " and " + second);

    document.write(".<br>The results are shown below.<ul>");

    var sum = first + second;
    document.write("<li>Sum: " + sum + "</li>"); // ad d

    var difference = first - second;
    document.write("<li>Difference: " + difference + "</li>"); // subtract
    /*
    M, S and D. For positive arguments M and S holds:
    The minuend (M) is the first number in a subtraction; the number from which another number (the Subtrahend) is to be subtracted.
    The subtrahend (s) is the number that is being subtracted from the minuend.
    Minuend.
    Example: in 8 − 3 = 5, 8 is the minuend (M). 3 is the subtrahend (S). 5 is the difference (D).
    If the minuend is larger than the subtrahend, the difference D is positive.
    If the minuend is smaller than the subtrahend, the difference D is negative.
    In any case, if minuend and subtrahend are equal, the difference D = 0.
    */

    var product = first * second;
    document.write("<li>Product: " + product + "</li>");    // multiply
    /* factors */

    var quotient = first / second;
    document.write("<li>Quotient: " + quotient + "</li>");  // divide
    /*
    Division shows the relationship between the dividend, divisor, quotient and remainder. The number which we divide (before  the '/' operator) is called the 'dividend.' The number by which we divide (after the '/' operator)is called the 'divisor.' The result obtained is called the 'quotient.'
    */

    var power = first ** second;
    document.write("<li>Power: " + power + "</li>");    // exponentiation

    document.write("</ul>Thanks, " + name + ". Have a Nice Day!");

Put the above in <script> </script> tags in html file. Uses <ul> - unordered list. When you run it the results are displayed w/ the #s chosen.

morten.c · Accepted Answer · 2019-03-14 14:39:43Z

0

document.write("\n");

document.write("<br>");

edited Mar 14, 2019 at 14:39

morten.c

3,5255 gold badges43 silver badges48 bronze badges

answered Mar 14, 2019 at 11:55

hacker

113 bronze badges

Comments

shashwat gupta · Accepted Answer · 2017-01-08 03:28:44Z

-1

 function breakline()
       {
            document.write("Hi?<br> nice shirt");
            // "<br>" use in document.write
         
            alert("Hi? \n nice shirt");
            // '/n' use in alert 
       }
       
       breakline();

answered Jan 8, 2017 at 3:28

shashwat gupta

91 bronze badge

1 Comment

soundslikeodd Over a year ago

Can you explain why your answer solves the question?

Collectives™ on Stack Overflow

Create new line in document write (JavaScript)

5 Answers 5

4 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related