Question 404968 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to change text of a div element with multiple classes?

I am a beginner programmer and I am creating a website using the Tutor LMS Pro plugin.
This plugin allows you to create a panel with courses, unfortunately it is not fully translated into my native language. I’m trying to translate individual headers using JavaScript, but for some reason it doesn’t work.
I have previously translated another element that has the same class as the element I am currently trying to translate (tutor-mb-24).
Therefore, both elements are translated in the same way. I thought that if the second element shares the tutor-mb-24 class but also has other classes, the code will only work for it, but it doesn’t work at all and is inferior to the code that only translates the tutor-mb-24 class for the other element.
I don’t really understand the essence of the problem.

Element I’m working with:

<div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
  <div class="tutor-dashboard-content">
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title"
       >
       Text I want to change
    </div>
  </div>
</div>

I tried:

document.getElementsByClassName("tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title").textContent="New Text";

document.addEventListener('DOMContentLoaded', function() {
    var x1 = document.getElementsByClassName("tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title");
    if (x1.length > 0) {
        x1[0].innerHTML = 'New Text';
    }

});
Tags:

2

Answers


  1. 0

    use document.querySelector() method
    with CSS syntax…

    const div2change = document.querySelector('div.tutor-fs-5.tutor-fw-medium.tutor-color-black.tutor-capitalize-text.tutor-mb-24.tutor-dashboard-title');

div2change.textContent = 'new text';
    <div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
  <div class="tutor-dashboard-content">
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title"
       >
       Text I want to change
    </div>
  </div>
</div>

    an other way :

    const div2change = document.querySelector('div.tutor-dashboard-content > div');

div2change.textContent = 'new text';
    <div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
  <div class="tutor-dashboard-content">
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title"
       >
       Text I want to change
    </div>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    There are many ways to do this; add a unique ID => ( id="css-identifier" ) attribute to the HTML if you have the ability. This would be the easiest way.

    document.querySelector(‘.element’) would give you the first occurrence of a list of elements.

    What if you need a different element with-in the list of elements? You can loop over the elements and get the index of that element within the list of elements or array of elements.

    You could create a helper function that does this for you and call it, passing the proper parameters needed for the code block within the method.

    See further comments in the code snippet

    const elements = document.getElementsByClassName('tutor-fs-5');
const stringOfTextToChange = "Some other text!"

// helper function, pass in elements, index, string
function changeTextUsingIndex(els, index, str) {
  // basic for let loop that iterates over the elements 
  for (let i = 0; i <= els.length; i++) {
    // conditional if index of for loop strict comparision of index of parameter passed in
    if (i === index) {
      // change the text to passewd in string
      els[i].textContent = str;
    }
  }
}

// call your method and pass in params
// start at 0, second index would be 1 so we pass in 1 as the targeted index
changeTextUsingIndex(elements, 1, stringOfTextToChange);
    <div class="tutor-col-12 tutor-col-md-8 tutor-col-lg-9">
  <div class="tutor-dashboard-content">
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
      Text with same class
    </div>
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
      Text with same class - this is the text I wish to change
    </div>
    <div class="tutor-fs-5 tutor-fw-medium tutor-color-black tutor-capitalize-text tutor-mb-24 tutor-dashboard-title">
      Text with same class
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search