We Keep Coding

How to access sub-elements in current object within JavaScript/jQuery?

Above I have three banner elements that I want to mark as unread if they are clicked. I structured each banner so that they have a span element within a nested div as shown with the image below (the red dot comes from the span element):
My javascript for this function is the following code:
I am trying to add a class ".read-dot" to the ".dot" span element that will hide it. I would like to add this class to the ".dot" span element that is inside the div that the user would click on. Any help would be appreciated.
I tried accessing the this.$(".dot) to access the dot element of the current object that triggered the event, but I now see this syntax is incorrect. I am new to jQuery which is why I tried this; I also could not find the page most relevant to my question on the API doc.

First, you have to remove click accessibility for the child.
$('div.banner > *').css('pointer-events', 'none');
And then, you can use the jquery selector for the .unread class to remove the class and replace .dot with .read-dot
$('.unread').click((e) => {
let clickedElm = e.target;
clickedElm.classList.remove('unread');
clickedElm.querySelector('span').classList.remove('dot');
clickedElm.querySelector('span').classList.add('read-dot');
})

Change the style of an element in an array

how can I change the style of an element in an array? I've hidden the class "testimonial" in CSS before, now I want to display a single element of that class. I'm searching for something like this:
let test= document.getElementsByClassName("test");
test[0].style.visibility = "block";

You are right, only should use the correct css property (it's maybe the display:block, in javascript HTMLElementNodeList[<indexOfElement>].style.display="block")

JS es6 on click add class to another element

I'm trying to show a div when another button has been clicked.
Unfortunately the site i'm using doesn't use jquery but has babel.js installed.
This is the HTML of the button the user is clicking
<button id="ba-Calculate" class="button">Calculate</button>
And this is the HTML for the button I would like to display
<button class="js-find-a-mortgage button u-margin-top-small" style="display: none;">Find a mortgage</button>
I've added a style of display none to hide the element.
This is what i've come up with so far.
var el = document.querySelector('#ba-Calculate');
el.onclick = function() {
document.getElementsByClassName('js-find-a-mortgage').style.display = 'block';
}
Any suggestions or where to read up on how I can crack this would be great.
I appreciate the feedback, thank you.

document.getElementsByClassName returns an array. So, you need to fetch the first element (I believe you have only one element with that class in the DOM) and add the style.
Try using
document.getElementsByClassName('js-find-a-mortgage')[0].style.display = 'block';

var trigger = document.querySelector('#ba-calculate')
var el = document.querySelector('.js-find-a-mortgate')
trigger.addEventListener('click', function () {
el.style.display = 'block'
})
getElementsByClassName returns an array like object
The getElementsByClassName method of Document interface returns an
array-like object of all child elements which have all of the given
class names. When called on the document object, the complete document
is searched, including the root node. You may also call
getElementsByClassName() on any element; it will return only elements
which are descendants of the specified root element with the given
class names.
Using querySelector will grab the first instance of a node matching that class name. You can then use the code you already had.

If you want to add class, I assume you need to use classList method add:
For example to add for your element class 'hidden':
document.getElementsByClassName('js-find-a-mortgage')[0].classList.add('hidden');
To see all classes use: document.getElementsByClassName('js-find-a-mortgage')[0].classList
https://www.w3schools.com/jsref/prop_element_classlist.asp

Adding CSS styles to injected DOM elements

I am using javascript to inject a few DOM elements into the page. I am able to inject a single DOM element and apply CSS style to it:
var $e = $('<div id="header"></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
Problem: If I have nested elements within $e, how can I apply CSS styles to the parents and its children seperately?
var $e = $('<div id="header"><div class="header-content"><span class="title"></span></div></div>');

As you have applied class to div inside parent element you can simply create a style to that class header-content and apply it.
In order to apply styles dynamically you can simply add class for individual elements like this
$('#id-of-element').addClass("header-content");
you can also find elements inside parent element like the one below
$e.find('.header-content').css('background-color', '#ccc');

Hi you can add css to any element using .css() method... Try the following example. I have added a div inside $e and applied different style... the thing is to use the id or class of the child inside parent div...
var $e = $('<div id="header"><div id="child"></div></div>');
$('body').append($e);
$e.css({
background: '#fbf7f7',
});
$('#child').css("background", "red");

To expand on my comments: if you need to access children regardless of any id or class, then just use $e.children().

How to access specific div child of certain class?

In my div i have a child div of class "someClass". I want to access that child by classname, not id.
EDIT: Only in this particular div, not all the other divs with same classname

var childOfNamedDiv = $('#namedDiv>.someClass')

var div = $('.someClass');
See jQuery Selectors.

just use the class selector:
$('div>.someClass').toggle()

if you already have a reference to the jquery object that is the parent of the div that you want to find:
var parent = $("#someDiv"); // this is the div that you may alread have found earlier
var child = parent.children(".someClass");