Monday, June 24, 2013

Changing Up and Down arrows

Today I discovered a whole world of special characters for triangle-arrows in HTML. First of all, I found a very good article in stackoverflow.com . For a second, I wrote a small Javascript function to change arrows on click with a text.  This function will change the text and arrow on click.

HTML:
<TR>
<TD>Peter</TD>
<TD><span id="arrow">&#9660;</span><a href="#" onclick="changeText(); return false;" id="part">Boris</a></TD>
</TR>
Javascript to change text and arrow direction:
function changeText() {

if ( document.getElementById('part').innerHTML == 'Boris')
{ document.getElementById('arrow').innerHTML = '&#9650;';
 document.getElementById('part').innerHTML = 'Andrew';
}
else {
document.getElementById('arrow').innerHTML = '&#9660;'
document.getElementById('part').innerHTML = 'Boris';
}
return true;
}

CSS:
#part, #arrow {
text-decoration: none;
font-weight: normal;
color: #000000;
}

No comments:

Post a Comment