Issue with capitalizing innerHTML text

Question

I am working on a project for my HTML class and wasn't able to figure out how to capitalize the first letter of text that replaced an image during the onmouseover event, which, in turn, returned to its initial picture state during the onmouseout event. I was able to successfully make the text show up, but can't get the first letter to be capital. The text is supposed to be a link (href, not a href, in order to prevent the page from going to the link if "cancel" was hit on the confirm box that popped up when clicked). A confirm box pops up asking if they want to go to the link, if not, then when they hit cancel, the page stays.

this is my function:

function planetname(x,y,z){
  document.getElementById(x).innerHTML=y;
  document.getElementById(x).style.backgroundColor="clear";
  document.getElementById(x).style.color="White";
  document.getElementById(z).style.height="172px";
}

In this case, x is the href link, y is the planet name and z is the table row that it is in. Here is part of my html:

<h3>Click on one of the images below to learn more about that planet.</h3>
    <table height="150px" id="tabl">
        <tr id="tr1">
            <td onmouseover=planetname("mercurylink","mercury","tr1") onmouseout=planetpic("Mercury","mercurylink","tr1")><href="mercury.htm" onclick=page("Mercury") id="mercurylink"><img src="images/mercury.png" height="150px" id="mercurypic"></td>
            <td hidden id="Mercury">Mercury</td>
        </tr>

There is no issue with the onmouseout or onclick, it is just the onmouseover that is giving me some issue.

Thanks a lot.

Answer 1

For your capitalization problem I propose this:

document.getElementById(x).innerHTML = y.substring(0,1).toUpperCase() + y.substring(1).toLowerCase();

First you extract the first letter and capitalize it and then make sure that all the rest are in lowercase.

Answer 2

You can make the text capitalized using CSS.

#yoyr-element-id
{
text-transform: capitalize;
}