javascriptgreasemonkey

Greasemonkey: change text in HTML


I have looked at several solutions for similar problems in here but I wasn't able to understand either

The webpage I'm trying to edit has the following bit:

<h4 data-v-42b52bab="" class="title is-4 mt-4">Behemoth <!----></h4>

I'm trying to make it say "Plots 19, 20, 21, 49, 50, 51" instead of Behemoth

What I attempted was:

var strongElems = document.getElementsByClassName('is-4');

for (var i=0; i<strongElems.length; i++)
{
  var thisElem = strongElems[i];
   thisElem.textContent = "Plots 19, 20, 21, 49, 50, 51"; // change it
}

But it doesn't seem to work. What can I do?

Edit:

I tried with a setTimeout and thisElem.innerHTML to no success

var strongElems = document.getElementsByClassName('is-4');


setTimeout(function() {


for (var i=0; i<strongElems.length; i++)
{
  var thisElem = strongElems[i];
   thisElem.innerHTML = "Plots 19, 20, 21, 49, 50, 51";
}
  
}, 5000); 

}); 

The full code of the page can't be added as it goes beyond the character limit. The URL of the page I want to edit is https://zhu.codes/paissa?world=78&sizes=0

Second edit:

The answer with InnerText alongside a correction on setTimeout worked

var strongElems = document.getElementsByClassName('is-4');
console.log(strongElems.length);

setTimeout(function() {

for (let i = 0; i < strongElems.length; i++) {
  let thisElem = strongElems[i];
  thisElem.innerText = "Plots 19, 20, 21, 49, 50, 51";
}
  
}, 3000); 


Solution

  • You are using wrong property to write that selected test. Instead of textContent you're supposed to use innerText.

    var strongElems = document.getElementsByClassName('is-4');
    console.log(strongElems.length);
    
    for (let i = 0; i < strongElems.length; i++) {
      let thisElem = strongElems[i];
      thisElem.innerText = "Plots 19, 20, 21, 49, 50, 51"; // change it
    }
    <h4 data-v-42b52bab="" class="title is-4 mt-4">Select a World</h4>
    <h4 data-v-42b52bab="" class="title is-4 mt-4">
      Behemoth
      <!---->
    </h4>