Using Javascript replace with getElementsByClassName not working

Question

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 Outcome Sets (COS)</td> </tr> </table> 

Any advise as to what I am doing wrong?

Answer 1

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

Answer 2

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 Outcome 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 Outcome Sets (COS)</td> </tr> </table> 

Answer 3

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", " ");

Answer 4

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.

Answer 5

try this:

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

instead of

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