I posted a question a few days ago which worked great and I thank those who helped but for reasons beyond my control I have to classes instead of id's as per my original post.

Basically what I am trying to do is remove the word "Other" from a string (The content is added dynamically through a form).

Here is the code I am trying to use:

var str = document.getElementsByClassName('gv-field-4-custom').innerHTML;
var text = str.replace("Other", " ");
document.getElementsByClassName('gv-field-4-custom').innerHTML = text;

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Oute Sets (COS)</td>
  </tr>
</table>

I posted a question a few days ago which worked great and I thank those who helped but for reasons beyond my control I have to classes instead of id's as per my original post.

Basically what I am trying to do is remove the word "Other" from a string (The content is added dynamically through a form).

Here is the code I am trying to use:

var str = document.getElementsByClassName('gv-field-4-custom').innerHTML;
var text = str.replace("Other", " ");
document.getElementsByClassName('gv-field-4-custom').innerHTML = text;

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Oute Sets (COS)</td>
  </tr>
</table>

Any advise as to what I am doing wrong?

• javascript
• html

• 3 possible duplicate of Javascript "getElementsByClassName" not working and literally hundreds of others – JJJ Commented Apr 15, 2015 at 13:00
• @Robert O'Halloran use my answer. It will work. Just let me know if you have any trouble with that... – Nisar Commented Apr 15, 2015 at 13:16
• Thanks you all for your replies. After readign through the examples I now have a better idea of how to use this. Sorry it might have been a duplicated post. – Robert O'Halloran Commented Apr 15, 2015 at 19:37

5 Answers 5

Your problem here is, that getElementsByClassName returns a set of elements, which in this particular case just contains a single element. If you just have a single element with this className, or just want to change one single element, you can go like this:

var element = document.getElementsByClassName('gv-field-4-custom')[0];
var str = element.innerHTML;
var text = str.replace("Other", " ");
element.innerHTML = text;

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Oute Sets (COS)</td>
  </tr>
</table>

If you have more elements that need a treatment, go like this:

var elements = document.getElementsByClassName('gv-field-4-custom');

for (var i = 0; i < elements.length; i++) {
  var str = elements[i].innerHTML;
  var text = str.replace("Other", " ");
  elements[i].innerHTML = text;
}

.gv-field-4-custom {
  color: #ff0000;
}

<table>
  <tr>
    <td class="gv-field-4-custom">Complex interventions, Evidence Synthesis (randomised trials), Studies within a Trial (SWAT), Trial Conduct, Trial Design, Other Core Oute Sets (COS)</td>
  </tr>
</table>

document.getElementsByClassName('gv-field-4-custom') will returns an array.You cannot directly get the innerHtml.

use document.getElementsByClassName('gv-field-4-custom')[0].innerHtml to get the value.Use the below code

var str = document.getElementsByClassName('gv-field-4-custom')[0].innerHTML;
var text = str.replace("Other", " ");

Note the s in getElementsByClassName. It means you need to loop over these.

You can use either the code

var className= document.getElementsByClassName("gv-field-4-custom");
for(i=0;i<className.length;i++)
{
    className[i].innerHTML = "text";
}

like @saina suggested, or use document.getElementsByClassName('gv-field-4-custom')[0] like @Imran suggested.

  var str = document.getElementsByClassName('gv-field-4-custom')[0];
  var oldText = str.innerHTML
  var text = oldText.replace("Other", " ");
  str.innerHTML = text;

try this:

document.getElementsByClassName('gv-field-4-custom')[0]

instead of

document.getElementsByClassName('gv-field-4-custom')