Javascript replace help

Question

I am trying to use javascript to change a few bits of text on a checkout page for the shopping cart I'm stuck in.

I have the following that works for several parts that are labeled with identifiers. The problem is that one of the parts I want to change is the class, and I cannot get it to work.

Any help getting the next one to work for the class? Thanks

window.onload = function() { var str = "Price per Unit"; el = document.getElementById('pricePerUnit'); el.innerHTML = str; var date = new Date(); var hours = date.getHours(); if (hours >= 0 && hours < 24) { el.innerHTML = str.replace("Price per Unit", "Price"); } } 

edit: here is the code I'm trying to change, basically I want to change $ 30 to say $ 30 + $ 5 / mo, there is only one element for this class

 <td valign="top" align="center" class="unitprice"> <font size="2" face="Arial, Helvetica, sans-serif" color="">$30.00</font></td> 

Answer 1

Retrieving elements by class name is not as easy in JavaScript as retrieving elements by identifier. Some browsers have several features that may help, but not all. The first getElementsByClass function, which is supported in Firefox 3 and the latest versions of Chrome, Safari, and Opera. However, it is not supported by IE 8 and below. There is also querySelector and querySelectorAll that select one or all elements (respectively) that match the CSS selector. They are supported by most browsers, including IE 8, but not IE 7 or lower.

It is best to use a library like jQuery or Prototype , which implements DOM queries for you. If you do not want to do this, the only solution for cross browser is to iterate over all the “potential” elements and check the className property of each for the class you are looking for. The code for this will depend on where the elements are located, which tags may have a class name, etc.

Answer 2

To give you some code to work with (but all Andy E answer loans):

 var element; var cls = 'unitprice'; if(document.querySelector) { element = document.querySelector('.' + cls) } else if(document.getElementsByClassName) { element = document.getElementsByClassName(cls)[0]; } else { var tds = document.getElementsByTagName('td'); for(var i = tds.length; i--;) { element = tds[i]; if(element.className == cls) { break; } } } element.children[0].innerHTML += "+$5/mo"; 

(Side note: here I use children[] because firstChild can return empty node text. If you are sure that there is no empty text node before the font element (if you can remove it anyway and use classes to style the content), you also can use firstChild (you can check on the console what element.firstChild gives). children[] not supported by Firefox 3.0 , though)

This only works if there is really only one in the entire document with this class.

See also comments for other answers. If you want to select more elements or select a more complex selector, be sure to go to the library.

If you know the identifier of the ancestor of this table cell (for example, the table itself), you can improve the search for this element, first get it.

Answer 3

Could you use the getElementsByClass JavaScript function