JavaScript Event Special Characters

[Arbitrator]

How do I escape or add special characters in JavaScript events? I have this code but when I use quotation marks inside it, the scripts stop working. I tried escaping with a backslash and still nothing. I also tried using character entities like " and \x22 but I ended up getting different characters than the ones specified and in some cases the script again stopped working. Help would be appreciated.

<td onmouseover="this.innerHTML = 'Sado "Chado" Yasutora'; this.style.color = '#0f0';"
onmouseout="this.innerHTML = 'Sado "Chad" Yasutora'; this.style.color = '';">

[Beagle]

try:

this.innerHTML = 'Sado \'Chado\' Yasutora'


or make a function to do it

[Arbitrator]

Already tried it. Didn't work. I can put the stuff in a function but then I'd have to assign an ID to every table cell which would be inconvenient since my table isn't dynamically generated. Is there any way to target the element calling the function without naming it explicitly? Concept:

<script type="text/javascript">
function textrollover() {
document.this.style.color = "#ff0";}
</script>

[Kor]

Should work using simple escapes \". On the other hand probably is better to use unicode escapes to make special characters literal. And I should have used DOM methods instead of innerHTML.


<script type="text/javascript">
function rollover(td){
td.style.color='#ffff00';
td.firstChild.data='Sado \u0022Chado\u0022 Yasutora';
}
function rollout(td){
td.style.color='';
td.firstChild.data='Sado \u0022Chado\u0022 Yasutora \u0026 Foo';
}
</script>

...
<td onmouseover="rollover(this)" onmouseout="rollout(this)">text</td>
...


Here's an online unicode convertor
http://www.hot-tips.co.uk/useful/unicode_converter.HTML

[Arbitrator]

That works perfectly, thanks! :p

EDIT: forgot this; just though I'd mention that I don't know what the Foo there is for.

Apparently, the backslash escapes don't work on inline JavaScript and HTML entities don't work either. Those unicode escapes work fine though. I took your code and adapted it for my purposes:

td.rollover {
background: url(arrow1.png) no-repeat center right;
}

<script type="text/javascript">

function rollover(td,oldname,newname) {
savedname = oldname

td.style.background = "url(arrow2.png) no-repeat center right";
td.style.color = "#0f0";
td.firstChild.data = newname;
}

function rollout(td) {
td.style.background = "url(arrow1.png) no-repeat center right";
td.style.color = "";
td.firstChild.data = savedname;
}

</script>

<td class="rollover"
onmouseover="rollover(this,this.firstChild.data,'Sado \u0022Chado\u0022 Yasutora');"
onmouseout="rollout(this);">Sado "Chad" Yasutora</td>