I have a program that will use Javascript to 'print' a value to the screen using 'document.write()'. The value printed is an integer. I am looking to be able to use CSS to apply styling to this integer that is being printed out. Below is some truncated sample code of what I have tried doing, but it isn't working (the program just quits:

var number = 5 //just for an example
document.write('<p id="jstext"' + number + '</p>')

and this is the CSS code I'm using:

#jstext {
    text-align: center;
    font-size: 90px;
}

Thanks

I have a program that will use Javascript to 'print' a value to the screen using 'document.write()'. The value printed is an integer. I am looking to be able to use CSS to apply styling to this integer that is being printed out. Below is some truncated sample code of what I have tried doing, but it isn't working (the program just quits:

var number = 5 //just for an example
document.write('<p id="jstext"' + number + '</p>')

and this is the CSS code I'm using:

#jstext {
    text-align: center;
    font-size: 90px;
}

Thanks

• javascript
• html
• css
• printing

2 Answers 2

That's wrong. See the correction:

var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^

You forgot a closing > here.

Working snippet below:

#jstext {
  text-align: center;
  font-size: 90px;
}

<script>
var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.write('<p id="jstext">' + number + '</p>')
//----------------------------^
</script>

UPDATE: Do not use the previous method.

The above method is totally wrong. It will remove all the event handlers and totally damage the DOM. A better way is to use:

document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;

Snippet

#jstext {
  text-align: center;
  font-size: 90px;
}

<script>
var number = 5; //just for an example
//------------^ // Not sure but ; is a must in some places.
document.body.appendChild(document.createElement('p'));
document.querySelector("body p:last-child").id = "jstext";
document.querySelector("#jstext").innerHTML = number;
</script>

you can use es6 Template Literals : document.write(<p id="jstext"> ${ number }</p>)