Question

var width = prompt("How many x's would you like in the bottom row? 1-100 is good)", "50")
var a_line= "";
var loop = 0;

while (loop < width) {
    a_line = a_line + "x";
    loop = loop + 1;
    document.writeln(a_line + "<br>");
}

This makes 1 x print on the first line 2 x’s on the 2nd line and so on up to the number of x’s the user gives.

How do I apply styling to the result of document.writeln(a_line + "<br>")? i.e centering each line.

Answer 1

you get CSS applied to using the correct way to insert html into a page, which is by not using document.writeln, but by picking the element where the content has to be placed in based on an id or css selector:

• document.getElementById(‘…’).innerHTML = “<p class=’css-class’>…</p>”;
• document.querySelector(‘…’).innerHTML = “<p class=’css-class’>…</p>”;
• element selection using MooTools/jQuery/etc and then setting the content.

JavaScript’s document.writeln does not print HTML, but prints plain text content, so it will never be interpreted by the browser. Build your string, then inject it into the element you want with an .innerHTML (plain JavaScript) or .html() (in jQuery), etc.