Issue
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>
Answered By - Barmar
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.