We Keep Coding

I'm trying to add an OnClick function to an element after page load and then make that OnClick function change the text of a separate element

I'm trying to add an OnClick function to 4 elements element on page load and then make those OnClick functions change the text of a separate element. I tried creating a function called AddClick that specified the elementID and then sets an OnClick attribute and seperate function. (I did this four times for each element I want to have the new function activated on click.
I then asked the AddClick to run on page load.
Then I created the functions that would replace the old text of the seperate element. (These should be set to run when the elements are clicked.
Sorry in advance if this was the wrong approach/If I'm not clear. First time posting on here, any help appreciated.
For the HTML the text I am trying to alter is within a div with an ID, but the h4 does not have a specific ID and I cannot add one.
Here is the JavaScript I tried to implement:
<script type="text/javascript">
function AddClick(){
//Name & Number
document.getElementById("o_5794738").setAttribute('onclick', "NewText()");
//Number
document.getElementById("o_5794733").setAttribute('onclick', "OldText()");
//Name
document.getElementById("o_5794723").setAttribute('onclick', "OldText()");
//None
document.getElementById("o_5794728").setAttribute('onclick', "OldText()");
};
window.onload = AddClick;
function NewText() {
document.getElementById("pt_fc_775338").getElementsByTagName(h4).innerHTML = "<h4>New Text</h4>";
}
function OldText() {
document.getElementById("pt_fc_775338").getElementsByTagName(h4).innerHTML = "<h4>Old Text</h4>";
}
Any help is much appreciated.

You can try this:
document.getElementById("demo").onclick = function() {myFunction()};
I found this example on https://www.w3schools.com/jsref/event_onclick.asp

No need to add click event using load you can directly add the click event using .addEventListener (by the way .setAttribute is not for adding any event)
Simply use .addEventListener like this :
document.getElementById("o_5794738").addEventListener('click', NewText);
Read this for more info about .addEventListener()
Here is the demo snippet below :
document.getElementById("o_5794738").addEventListener('click', NewText);
function NewText() {
document.getElementById("pt_fc_775338").getElementsByTagName("h4")[0].innerHTML = "New Text";
}
<button id="o_5794738">Click Me!</button>
<div id="pt_fc_775338">
<h4></h4>
</div>

jQuery - Select an element by ID not working

I'm trying to select an element and then add / remove a class. I have achieved this plenty of times with other elements, however for this one it doesn't want to work.
My html is as follows:
<div>
<a class="login-headerText" id="hypLogin" style="padding-right:5px; float:left" >Login</a>
<h4 class="login-headerText" style="font-weight:bold; padding-right:5px; float:left">/</h4>
<a class="login-headerText" id="hypCreateAccount">Create Account</a>
</div>
The div is wrapped inside another div. (id=modal)
I want to select "hypLogin" then add a class to it on click. It works if i do this in the onClick event, however it wont work in a seperate script. (The script is referenced and works as it is used for other elements)
This is my jQuery
$('#hypLogin').click(function () {
$(this).removeClass('login-headerText').addClass('login-headerText-Unselected');
});
Tried debugging it and it's not getting hit at all.
Probably something really simple.

Couple of things:
you must do it on:
$( document ).ready(function() {
});
Does these elements printed dynamically?
try to use:
$('#hypLogin').on('click', function () {
});
try to put your code on modal open event.

Here is working fiddle
try this:
$(document).ready(function () {
$('#hypLogin').click(function () {
$(this).removeClass('login-headerText').addClass('login-headerText-Unselected');
});
});

jQuery function to only run on the element clicked

I'm trying to implement an accordian style box on some content. However there are 4-6 of these boxes on 1 template, all with different classes for obvious reasons. However I want to try and make the code as easy to read as possible and I don't want to duplicate the code for each class name. I'm assumung jQuerys (this) method would work but i'm not 100% sure how to use it.
Here is my JS code:
<script type="text/javascript">
$(document).ready(function(){
$(".block-50_hoverHeader").click(function (){
//alert("clicked");
$(".scrollText").slideToggle(1000);
});
});
</script>
So the .scrollText class is the div that holds all the content which needs to be displayed after the onClick function. But currently when I click the header all the .scollText divs appear on the page. So i want it to only appear on the parent header div that is being clicked.
Here the HTML:
<div class="block-50 left textHoverWrapOne">
<img src="" alt="" /> (Image working as BG Image)
<div class="block-50_hoverHeader"><p>This is a header!</p></div>
<div class="block-50_textHoverOne trans_click scrollText">
This is the content that needs to be displayed after the
</div>
</div>

Find the scrollText relative to the clicked block-50_hoverHeader element. In this case it is the next sibling, so you can use .next()
Inside the event handler this points to the element in which the handler is registered, in this case it is the block-50_hoverHeader element, so we can find the next scrollText using $(this).next()
jQuery(function ($) {
$(".block-50_hoverHeader").click(function () {
$(this).next().slideToggle(1000);
});
});
Demo: Fiddle

There are a number of ways to accomplish this. I prefer to grab the shared parent and then use find as I find this is a bit less likely to break due to minor modifications to the html structure.
$(".block-50_hoverHeader").click(function (){
$(this).closest(".textHoverWrapOne").find(".scrollText").slideToggle(1000);
});

Why not targeting the whole div??
jQuery(function ($) {
$(".block-50").click(function () {
$(this).find('.scrollText').slideToggle(1000);
});
});

Using jquery to make a div clickable and to run a function

So i want to execute code when i click on a div.
So I have a function
function froth(){$("#area").load("test.html #enquiry1");}
I want to call this function when I click a div
<div id="t1">Test</div>
So I try and use this code
$('#t1').click(function(){
froth();
});
Nope it doesnt work.
BUT
I go to the HTML document and do this
<div id="t1" onclick="froth()">Test</div>
AND IT works perfectly.
So my question is, what am i doing wrong here? Why would it work when in the html doc and not work when i try and make it clickable with jquery?

The main issue is that you need to bind your click event after the rest of the DOM has loaded
$(document).ready(function() {
$('#t1').on('click', function(){
froth();
});
});
You can see a live example here

$(document).on('click', '#t1', function() {
froth();
});

Set focus on appear

I have a page that has a lot of JS created elements. So i wish to focus a textarea after it appear. I try to make it with help of addEventListener like so:
mytextarea.addEventListener('someEvent', function(e)
{
this.focus();
});
My problem is, that i can not found the right Event, that would be fired at the moment, when textarea get appended in the document, like here
document.getElementsByTagName('body')[0].appendChild(mytextarea);
Native JS Only please. Thank you

Have you tried this:
document.getElementsByTagName('body')[0].appendChild(mytextarea);
mytextarea.focus();
FIDDLE

this should work:
<textarea autofocus></textarea>

Put your focus in
$(document).ready(function(){
//Here
});
This mean your textarea is appended to the document.
And without jQuery :
window.addEventListener('load', function () {
//here
});