I have an unordered list (ul) that is generated by external javascript. In each list item there is a repeated line that I'd like to delete. Because I cannot modify the external javascript, I am attempting to use the replace method. The list is identified by a class given to each li element; rss-item.
The following is my code:
<script>
function myFunction() {
var str = document.getElementsByClassName('rss-item').innerHTML;
var res = str.replace('Text to replace', '');
document.getElementsByClassName('rss-item').innerHTML = res;
}
</script>
<button onclick="myFunction()">Replace</button>
The error is occuring on the following line:
var res = str.replace('Text to replace', '');
The error states:
Uncaught TypeError: Cannot read property 'replace' of undefined
From what I understand, this probably means that the javascript is either not finding the element with class name 'rss-item', or not finding the text I am trying to replace. I am absolutely certain this is the correct class name, and that the text I am trying to replace is indeed there. Is this problem occuring because the markup is being generated by javascript? I've e to a dead end.
I have an unordered list (ul) that is generated by external javascript. In each list item there is a repeated line that I'd like to delete. Because I cannot modify the external javascript, I am attempting to use the replace method. The list is identified by a class given to each li element; rss-item.
The following is my code:
<script>
function myFunction() {
var str = document.getElementsByClassName('rss-item').innerHTML;
var res = str.replace('Text to replace', '');
document.getElementsByClassName('rss-item').innerHTML = res;
}
</script>
<button onclick="myFunction()">Replace</button>
The error is occuring on the following line:
var res = str.replace('Text to replace', '');
The error states:
Uncaught TypeError: Cannot read property 'replace' of undefined
From what I understand, this probably means that the javascript is either not finding the element with class name 'rss-item', or not finding the text I am trying to replace. I am absolutely certain this is the correct class name, and that the text I am trying to replace is indeed there. Is this problem occuring because the markup is being generated by javascript? I've e to a dead end.
Share Improve this question asked Mar 16, 2015 at 19:26 JimmiJimmi 351 gold badge1 silver badge5 bronze badges1 Answer
Reset to default 7document.getElementsByClassName('rss-item') returns an array-like object (a HTMLCollection). If you want the first element, you should ask for it:
var str = document.getElementsByClassName('rss-item')[0].innerHTML;
If you wanted to be a bit more defensive, it may be worth actually checking that any elements have been found, using something like this:
var elements = document.getElementsByClassName('rss-item');
if (elements.length > 0) {
elements[0].innerHTML = elements[0].innerHTML.replace('Text to replace', '');
}
As you have suggested in the ments, you may wish to perform the replacement on all of the elements that are found. In this case, you can loop through the elements like this:
var elements = document.getElementsByClassName('rss-item');
for (var i = 0; i < elements.length; ++i) {
elements[i].innerHTML = elements[i].innerHTML.replace('Text to replace', '');
}