Here is the code for a function called EVOLVE1:
function EVOLVE1()
{
if(ATP >= evolveCost)
{
display('Your cell now has the ability to divide.');
display('Each new cell provides more ATP per respiration.');
ATP = ATP - evolveCost;
document.getElementById('cellscount').innerHTML = "Cells = " + cells;
document.getElementsById('ATPcount').innerHTML = "ATP + " + ATP;
document.getElementById('dividebtn').style.display = "inline";
document.getElementById('dividebtn').innerHTML = "Divide(" + divideCost + " ATP)";
}
else
{
display('Not enough ATP.');
}
}
When this function is executed, only the first four statements are actually executed. The last three lines do not have any effect, which means that the button doesn't become visible, the paragraph isn't changed and the text in the button remains the same. I'm currently unsure why this behavior is occurring. Also, please note that display() is a simple function that modifies a paragraph within a div as shown below:
function display(x)
{
var z = document.getElementById('centretext').innerHTML;
document.getElementById('centretext').innerHTML = z + "<br>" + x;
}
I don't believe that the display() function is causing the issue. The HTML for the buttons:
<div id="left" class="format">
<button class="buttonformat" id="respirebtn" onclick="respire()"> Respire </button>
<button class="buttonformat" id="evolvebtn" onclick="EVOLVE1()"></button>
<button class="buttonformat" id="dividebtn" onclick="divide()"></button>
<p id="lefttext">
</p>
</div>
The CSS for the buttons:
#evolvebtn
{
display: none;
position: relative;
top: 450px;
left: 5px;
}
#dividebtn
{
display: none;
position: relative;
left: 5px;
top: -30px;
}