I have been working on a function that is supposed to adjust the font-size and text-align properties of a paragraph located within a div tag once a button is pressed.
function customizeText()
{
document.getElementById('centretext').innerHTML = "";
document.getElementById('button1').style.display = "none";
document.getElementById('centretext').style.font-size = "99%";
document.getElementById('centretext').style.text-align = "left";
}
The paragraph's original properties are:
#centretext
{
font-size: 200%;
font-family: Merriweather;
text-align: center;
font-weight:bolder;
}
However, upon clicking the button, no changes occur. If I comment out the last two lines of the function (the ones responsible for property changes), then the first two lines work perfectly. What could be going wrong here? Edit: Here's the markup of the div in question:
<div id = "centre">
<p id="centretext">
You are a cell.
<br>
It's the survival of the fittest.
<br>
<br>
To survive, you must divide, grow and evolve.
</p>
<p id="centretext2">
</p>
<button class ="buttonformat" id="button1" type="button" onclick="customizeText()"> OK </button>
</div>