Well I thought it would be fairly straight forward :D

Basically I have a simple menu and when someone mouses over it I want it to change the contents of a <div> below is the code I thought would work however it appears not to work. Have I made a newbie mistake?


<div id="subheader2">
<p>
<ul class="menu red">
<li class="current"><a href="index.php" onmouseover="document.getElementById('headerdescription').innerText ='Home Sweet Home';">HOME</a></li>
<li><a href="index.php?page=about" onmouseover="document.getElementById('headerdescription').innerText ='Find out more about me and what I can do for you';">ABOUT ME</a></li>
<li><a href="index.php?page=ethos" onmouseover="document.getElementById('headerdescription').innerText ='What Drives me and what I want to achieve with my work';">ETHOS</a></li>
<li><a href="index.php?page=portfolio" onmouseover="document.getElementById('headerdescription').innerText ='See some of my previous work, including descriptions, pictures and who I've worked for';">PORTFOLIO</a></li>
<li><a href="index.php?page=clients" onmouseover="document.getElementById('headerdescription').innerText ='A complete list of everyone I've ever worked for including links to their sites';">CLIENTS</a></li>
<li><a href="index.php?page=contact" onmouseover="document.getElementById('headerdescription').innerText ='So you like what you see? Why not drop me a line.';">CONTACT ME</a></li>
</ul>
</p>
</div>
<div id="subheader3">
<p>
<div id="headerdescription">asddsa</div>
</p>
</div>

-----

<div id="subheader2">
<p>
<ul class="menu red">
<li class="current"><a href="index.php" onmouseover="document.getElementById('headerdescription').innerText ='Home Sweet Home';">HOME</a></li>
<li><a href="index.php?page=about" onmouseover="document.getElementById('headerdescription').innerText = 'Find out more about me and what I can do for you';">ABOUT ME</a></li>
<li><a href="index.php?page=ethos" onmouseover="document.getElementById('headerdescription').innerText = 'What Drives me and what I want to achieve with my work';">ETHOS</a></li>
<li><a href="index.php?page=portfolio" onmouseover="document.getElementById('headerdescription').innerText = 'See some of my previous work, including descriptions, pictures and who I\'ve worked for';">PORTFOLIO</a></li>
<li><a href="index.php?page=clients" onmouseover="document.getElementById('headerdescription').innerText = 'A complete list of everyone I\'ve ever worked for including links to their sites';">CLIENTS</a></li>
<li><a href="index.php?page=contact" onmouseover="document.getElementById('headerdescription').innerText = 'So you like what you see? Why not drop me a line.';">CONTACT ME</a></li>
</ul>
</p>
</div>
<div id="subheader3">
<p>
<div id="headerdescription">asddsa</div>
</p>
</div>



Pretty simple really. You just needed to escape the apostrophes in your description. So:

The text 'Hello I'm Jordan' would be terminated after "I" because of the apostrophe, the browser cannot tell the difference between the apostrophe and the quote mark at the end of the text so assumes that you wanted to finish the text at the first quote mark.

To escape it you would place a slash before the apostrophe so: 'Hello I\'m Jordan'. The browser now knows that the ' in "I'm" is an apostrophe and the ' at the end of Jordan is where you want to terminate the text.


Hopefully that's well explained for you!



The above explanation uses full quotation marks around the description (" ") instead of (' ') so the apostrophes don't need escaping...


Jordan

ok so ignoring the fact I've forgot to escape the one instance of the ' and ignoring the fact I've not used camelcase for my class names (and not really considered good practice as there's about a dozen different ways of syntaxing it good article on slashdot few weeks ago about it)

that seems like an awful lot of js just for something I thought was quite simple.

would something like this work?

onmouseover="document.getElementById('headerdescription').innerHTML = 'See some of my previous work, including descriptions, pictures and who I\'ve worked for';"