Applying Css To Javascript Document.writeln ( )

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'; lo

Solution 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.

Solution 2:

document.write("<div style='..........'">");
while( loop < width) { .....}
document.write("</div>");

Something like that. Although really you should avoid using document.write.

Solution 3:

Make a_line be contained in a paragraph (<p> tag) with some css applied.

while (loop < width) {
 a_line += "x";
 b_line = "<p style='text-align:center;width:100%;'>" + a_line + "</p>";
 loop = loop + 1;
 document.writeln(b_line);
}

Solution 4:

Apply the HTML to the x's inside the string like so:

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

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

Solution 5:

You shouldn't use document.write/ln to modify a webpage. Pages are displayed based on the Document Object Model, which is a tree of elements, not plain text. You should create an element for each line, give each the necessary text content and add to the document:

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

while (loop < width) {
    a_line = a_line + "x";
    loop = loop + 1;
    element = document.createElement("div");
    element.appendChild(document.createTextNode(a_line));
    document.body.appendChild(element);
}

CSS:

div {
    text-align:center;
}

Demo: http://jsfiddle.net/hQHHu/