How to style the script output in html?

Question

How can I style my output from js function. I want that color was white, position in center.

I try to write after innerHTML=+x+

 function getNumber(){ var x = document.getElementById("value-number").value document.getElementById("numbers").innerHTML=x } 

 <div style="margin-left:30px";> <select id = "value-number"> <option value="5555-555">Kate</option> <option value="4444-444">My</option> </select> <button onclick="getNumber()"> Show me </button> </div> <p id="numbers"></p> 

Answer 1

.style is used to add the required CSS properties to the element

 function getNumber(){ var x = document.getElementById("value-number").value var elm = document.getElementById("numbers") elm.innerHTML = x elm.style.backgroundColor = '#F00' elm.style.olor = '#0F0' } 

 <div class="picker"> <select id = "value-number"> <option value="5555-555">Kate</option> <option value="4444-444">My</option> </select> <button onclick="getNumber()"> Show me </button> </div> <p id="numbers"></p> 

Alternatively you can add CSS class which I prefer more.

 function getNumber(){ var x = document.getElementById("value-number").value var elm = document.getElementById("numbers") elm.innerHTML = x elm.classList.add('my-style') } 

 .my-style { background-color: #F00; color: #0F0; text-align: center; } 

 <div class="picker"> <select id = "value-number"> <option value="5555-555">Kate</option> <option value="4444-444">My</option> </select> <button onclick="getNumber()"> Show me </button> </div> <p id="numbers"></p> 

Answer 2

try

document.getElementById("numbers").style.color = "white";

document.getElementById("numbers").style.textAlign = "center";