changing HTML characters with javascript
Question
I have an HTML page with javascript that hides and shows an element with a given ID (shown below). I would also like it to change a single character in the HTML text such that when the text is hidden a » character is shown and when the hidden text is made visible a ︾ character is shown (same as the other character, but facing downwards)
What do I need to do to reference the element with the pass » and change it to pass ︾ ? Preferably, I would like to do this without knowing the first part of the text is pass . It could also be fail , for instance.
Thanks, PaulH
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
<!--
function toggle_visibility(id)
{
var e = document.getElementById(id);
if(e.style.display == 'block')
{
e.style.display = 'none';
}
else
{
e.style.display = 'block';
}
}
//-->
</script>
</head>
<body>
<a href="#" onclick="toggle_visibility('1');"><div class="bar"><span class="foo">pass »</span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div></a>
<div class="baz" id="1" style='display:none;'>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat
</div>
</body>
</html>
3 answers
solution1
1 2011-03-03 22:58:35
There are three main ways to do this.
Find and replace
You can find and replace innerHTML ( demo ):
function toggle_visibility(that, id) {
var e = document.getElementById(id);
if (e.style.display == 'block') {
e.style.display = 'none';
that.innerHTML = that.innerHTML.replace('\ufe3e', '\u00bb');
}
else {
e.style.display = 'block';
that.innerHTML = that.innerHTML.replace('\u00bb', '\ufe3e');
}
}
that must point to the link to be changed:
<a href="#" onclick="toggle_visibility(this, '1');"> ...
Keep in mind that if there is an HTML tag inside that that must keep its expando properties or event handlers attached from within JavaScript, this method is not suitable.
Replace only a wrapped section
You would use something like:
<span class="foo">pass <span id="arrow" class="arrow">»</span></span>
And then change the HTML of the inner section only:
document.getElementById('arrow').innerHTML = '\ufe3e';
Keep in mind that duplicate IDs are invalid, so if you will have more than one of these collapse boxes on the page, a JavaScript library such as jQuery can help find the element by class instead:
var $arrow = $(that).find('.arrow');
$arrow.html($arrow.html().replace('\u00bb', '\ufe3e'));
Have CSS help you
You could use the CSS content declaration , but a more compatible (and possibly nicer looking) way to accomplish your task is to use background images ( demo ).
Here's how you would change the HTML:
<a href="#" onclick="toggle_visibility(this, '1');"><div class="bar"><span class="foo arrowR">pass</span><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p></div></a>
You would use CSS like this:
.arrowD, .arrowR {
background-position: right;
background-repeat: no-repeat;
padding-right: 16px;
}
.arrowD {
background-image: url('http://snap.lacounty.gov/Image/DownArrow.png');
}
.arrowR {
background-image: url('http://snap.lacounty.gov/Image/RightArrow.png');
}
And change the class from JavaScript:
function toggle_visibility(that, id) {
var e = document.getElementById(id),
f = that.getElementsByTagName('span')[0];
if (e.style.display == 'block') {
e.style.display = 'none';
f.className = f.className.replace('arrowD', '') + ' arrowR';
}
else {
e.style.display = 'block';
f.className = f.className.replace('arrowR', '') + ' arrowD';
}
}
solution2
0 2011-03-03 21:48:08
Wrap another span around the character you want to show. Then set the .innerHTML() of that span during your regular show/hide process.
You could also have both characters prewritten and just show/hide those spans as well.
If you need coded examples of this I can certainly help.
solution3
0 ACCPTED 2011-03-03 22:06:29
Here is basically what you asked for:
http://jsfiddle.net/jtbowden/C9KYM/
I added an id attribute to the span around pass » so it was easier to reference.
However, as others have stated, jQuery makes this easier. But even without jQuery, you can simplify by adding spans for your open/close cases:
http://jsfiddle.net/jtbowden/4sBLU/
This removes the reliance on search/replace functionality, which may or may not work with special characters easily. In addition, you could easily replace these spans with images.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.