Copying name from ID and replacing the child description class

November 4, 2022

I’m trying to find all IDs on a page that start with "PlanningBoard_RadScheduler" so that I can replace their child class "AppointmentDescription" "company"/"lunch" with the name in the title Bobby Bob or Joey Joe (the name being prone to change).

I’m not very familiar with JavaScript so please forgive my mistakes.

<div id="PlanningBoard_RadScheduler_159_0" title="company
Bobby Bob
Planned 3 hours
From 09:00 to 13:00
" class="rsApt Planning" style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">
                                                                                                                
  <span class="AppointmentDescription">company</span><br>
   <span class="AppointmentHour">3 hours</span>
    <a class="rsAptDelete" href="#" style="visibility: hidden;">delete</a>
</div>

<div id="PlanningBoard_RadScheduler_198_0" title="lunch
Joey Joe
Planned 3 hours
From 09:00 to 13:00
" class="rsApt Planning" style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">
                                                                                                                
  <span class="AppointmentDescription">lunch</span><br>
   <span class="AppointmentHour">3 hours</span>
    <a class="rsAptDelete" href="#" style="visibility: hidden;">delete</a>
</div>

Heres what i have so far:

I am able to use querySelector to find instances of "PlanningBoard_RadScheduler" but i’m not sure how to be able to select the names that occur in the title sections and appear after company or lunch.

var element = document.querySelector('[id^=PlanningBoard_RadScheduler]').id

I know i can use the text.replace function to achieve this but i’m not sure how to select the name.

var replacedText = text.replace(/["company"||"lunch" in
"AppointmentDescription" class]/gi, '[Name variable occuring after "lunch", "company" in "PlanningBoard_RadScheduler"'s title]');

Thank you in advance.

>Solution :

you can use the split() method to split the title into an array of lines, then index that to get the name on the second line.

document.querySelectorAll('[id^="PlanningBoard_RadScheduler"]').forEach(div => {
  let name = div.title.split('\n')[1];
  div.querySelector('.AppointmentDescription').innerText = name;
});

<div id="PlanningBoard_RadScheduler_159_0" title="company
Bobby Bob
Planned 3 hours
From 09:00 to 13:00
" class="rsApt Planning" style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">

  <span class="AppointmentDescription">company</span><br>
  <span class="AppointmentHour">3 hours</span>
  <a class="rsAptDelete" href="#" style="visibility: hidden;">delete</a>
</div>

<div id="PlanningBoard_RadScheduler_198_0" title="lunch
Joey Joe
Planned 3 hours
From 09:00 to 13:00
" class="rsApt Planning" style="height: 36px; width: 70px; left: 2400%; margin-left: 24px;">

  <span class="AppointmentDescription">lunch</span><br>
  <span class="AppointmentHour">3 hours</span>
  <a class="rsAptDelete" href="#" style="visibility: hidden;">delete</a>
</div>