We Keep Coding

Make function run after page loads and edit Label's innerHTML without ID or a Class

I am trying to design my teachable-based website, and I can only edit the following relevant fields:
HTML/JavaScript code snippets inside the head tag on all pages.
custom CSS across all pages on your site.
I have jQuery.
While this is pretty limiting I manage to get by. However, I ran into a problem:
I am trying to edit the text of this object:
a picture of the object I am trying to edit.
Basically, I am trying to edit the inner HTML of both
<label for="subject">Subject</label>
<label for="student_message">Message</label>
From "Subject" to "נושא" and from "Message" to "הודעה".
These labels have no classes and ID's, and their only attributes are "for" attributes.
Now, if it helps, these specific labels are inside these divs:
<form id="contact-form" accept-charset="UTF-8" method="post">
<div class="row form-group">
<label for="subject">Subject</label>
<label for="student_message">Message</label>
</div>
</form>
These are the only lables on the site inside the "contact-form" div.
So, the problems are:
I need to access these labels from the HEAD tag, and they are in the
BODY tag. So I guess I need some sort of a waiting function to run
after the page/form loads.
I can only differenciate these labels from
others using their attribute and their parent div's attributes.
My questions:
How do I make a function that runs after the page loads but doesn't make the whoe page freeze?
Inside that function, How do I access objects using their attributes?
And just because it seems important and I don't know it yet, how do I access objects within objects?
Thank you very much :)

You said you had jQuery available, so enclosing your code in $(document).ready( ensures the body is loaded. Then use jQuery selector to find object by attribute:
$(document).ready(function () {
$("label[for='subject']").html('נושא');
$("label[for='student_message']").html('הודעה');
});

The elements of interest can be found relative to element(s) that can be found directly - ie elements identified by id/class.
For example ...
jQuery(function($) {
const $formGroup = $('#contact-form div.form-group').eq(0);
$formGroup.find('label').eq(0).text('נושא');
$formGroup.find('label').eq(1).text('הודעה');
});
Alternatively, if you prefer not to make an assignment ...
jQuery(function($) {
$('#contact-form div.form-group').eq(0)
.find('label').eq(0).text('נושא')
.next('label').text('הודעה');
});

Insert schema data inside html tag with javascript

I am wondering if there is a way to insert text, schema data in particular, into a html div tag using javascript. I know there are methods for modifying existing values inside a tag such as class, href, title, but can't seem to find a way to add something new.
Basically I have <div id="main"> and I want to modify it to be <div id="main" itemtype="http://schema.org/SomeCategory" itemscope> and to be able to remove it later.
The context for such a need is using fetch / js to replace parts of webpages rather than reloading the entire page. The product pages use the schema notation, whereas general info pages do not, though all templates use the "main" div.

Unbeknownst to me, the innerHTML function attached to the body tag allows me to change actual div tags using replace. So it is simple:
input ='<div id="main">';
output='<div id="main" itemtype="http://schema.org/SomeCategory" itemscope>';
document.body.innerHTML = document.body.innerHTML.replace(input,output);

select object using custom "data-" attribute instead of id

I am trying out tinymce and would like to submit a custom form that contains several instances of the editor. Selecting the content using a basic id is straight forward,
<div id="myDivInline" data-uuid="myUuid"><p>This is to be replaced by TinyMCE <br><br>CLICK ME TO LOAD TinyMCE</p></div>
var myVar = tinyMCE.get('myDivInline').getContent();
However I would like to select the object based on a custom data- attribute. Is this possible? for example, the below fails (probably due to bad syntax structure inside .get('div[data-uuid="myUuid"]')
<div id="myDivInline" data-uuid="myUuid"><p>This is to be replaced by TinyMCE <br><br>CLICK ME TO LOAD TinyMCE</p></div>
var myVar = tinyMCE.get('div[data-uuid="myUuid"]').getContent();

you can try going with something like this:
$("div[data-uuid='myUuid']")
where you simply use selector you would use in css

Matching a click element with corresponding hidden project div

I am writing a quick function in javascript that interacts with wp in a set of posts that are hidden and shown when I click an element that corresponds to its matched href="#element".
Function would run like so:
1) You click one of the dynamically added post titles where it has a href value of the post title in the tag for it.
2) The corresponding hidden project under it with an id that matches the href value of the dynamically added elements above to basically show it and hide the previous child project.
Now I am trying to do this with pure javascript alone but its beginning to get really messy and long winded. I wondered if there was a good tool in the jquery api to aid in this?
Thanks,

If I understand your question correctly, in jQuery you could:
<h1 class="buttonHeader" data-divider="#dividerId1">Test</h1>
<h1 class="buttonHeader" data-divider="#dividerId2">Test 2</h1>
<div class="myDivider" id="dividerId1"><p>Content</p></div> <!-- Not sure what href is used for? -->
<div class="myDivider" id="dividerId2"><p>Content 2</p></div>
$(document).ready(function() {
$('h1.buttonHeader').click(function() {
// Get data attribute from clicked header
var correspondingDiv = $(this).attr('data-divider');
// Hide any open 'myDivider' dividers
$('.myDivider').hide();
// Display the corresponding divider
$(correspondingDiv).show();
})
})
I don't really understand why you're using the href attribute.
Edit: JSFiddle.
Edit: I've removed the loop as it wasn't necessary.

jQuery tooltip + ajax content

I'm trying to implement a simple rollover tooltip for images on a page where when you roll over an image, you get a little tooltip window and have the contents loaded from a database via AJAX.
I can hack this together quickly but I wanted an elegant way of doing this without using any inline JS.
So my question is: If I capture the rollover event inside my external .js file, how do I pass it the database ID?
I'm using jQuery so I would do something like this:
$('.item_roll').mouseover(function() {
//show tooltip and load ajax content
}
and my HTML would be something like this:
<img src="thumb.png" class="item_roll" />
Without calling a function from the img tag, how do I send the JS call above the database id? I hope that makes sense.
Thanks.

I recommend having both a class and an id in the image tag:
<img src="thumb.png" id="id_28436379" class="item_roll" />
Then in your jQuery event, you can access that like so:
$(".item_roll").mouseover(function(event){
alert( event.target.id.split("_")[1] ); // displays 28436379
});
This should let you access the database id by making it the id of the image tag.
EDIT: After reading some helpful comments, I've changed my answer so that the id does not start with an integer, since this is nonstandard and might not work in all browsers. As you can see, the split/[] code extracts the id number from the id string.