Prototype find class and replace text

Question

Hi Guys,

I am using the prototype framework [requirement by platform] and I am trying to find a ID and replace some text in the ID so that it disappears.

The HTML looks like:

<div id="top">
<a href="/login">login</a> | <a href="/register">register</a>
</div>

The problem is I don't want the " | " to appear in the ID "top". So I guess it's sort of "find element " | " in ID top and remove"

    Event.observe(window, 'load', function() {
try { 
if ($$('#top')!=null) {

var topmenu = document.getElementById('top');
var value = topmenu.value;
// define an array of replacements
var replacements = [
    { from: '|', to: ' ' }
];
for (var i = 0, replacement; i < replacements.length, replacement = replacements[i]; i++) {
    // replace
    value = value.replace(replacement.from, replacement.to);
}
// replace the old text with the new
topmenu.value = value;    
} } 
catch(ex) {
}
});

Tried with this above but doesn't work. Can anyone assist ?

Thanks

Answer 1

Looks like you just need quotes around the |. Otherwise it looks okay. Probably don't need the conditional either since you're in a try catch but maybe that's just too loosy goosy.

Answer 2

Can't you just use CSS to hide the pipe? Just change the color to match the background-color so that it is invisible.

#top {color: #fff } /* substitute with the right background color if different */
#top a {color: #000 } /* or whatever it has to be */

EDIT: The right property you should be replacing is innerHTML, not value.

var value = topmenu.innerHTML;
// define an array of replacements
var replacements = [
    { from: '|', to: ' ' }
];
for (var i = 0, replacement; i < replacements.length, replacement = replacements[i]; i++) {
    // replace
    value = value.replace(replacement.from, replacement.to);
}
// replace the old text with the new
topmenu.innerHTML = value;