CODEWITHSUNDEEP
javascripthtml
Robert O'Halloran
Robert O'Halloran

Reputation: 17

Using Javascript replace with getElementsByClassName not working

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?

Upvotes: 0

Views: 6002

Answers (5)

Markai
Markai

Reputation: 2098

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>

Upvotes: 3

Nisar
Nisar

Reputation: 888

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

Upvotes: 1

Tolga Ozses
Tolga Ozses

Reputation: 355

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.

Upvotes: 1

Joseph
Joseph

Reputation: 1074

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

Upvotes: 1

Imran Qamer
Imran Qamer

Reputation: 2263

try this:

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

instead of 

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

Upvotes: 0

Related Questions