We Keep Coding

How to access the child element

I have been trying a lot to focus the lightning-input. But I am not getting how to focus the childElement.
The element which I would like to focus is child Element of parentIn. But when I tried to getElementByclassname I am getting undefined , thinking it cant be accessed like that.
How to access the class which is pointed in the image using JS. I tried but getting undefined
Here is how I tried.
let taggingModal = document.getElementById('globalTaggerId').children;
I am not getting how to move further. Please help me to get through this.

you can try
let taggingModal = document.getElementById('globalTaggerId');
taggingModal.getElementsByClassName("parentIn")[0].focus();

Replacing HTML text with javascript

I am trying to replace some html text from some code with some new text using javascript and I have learned about Javascript HTML DOM which I believe is the way to do this; however, whenever write a method, nothing seems to change.
This is a line I am interested in changing. I want to change "Text here" to "Hello World!".
Text here
This the code I used
<script> document.getElementById("login_or_create_user_modal").innerHTML = "Hello World!"; </script>
My first concern is I have noticed that it is a data-reveal-id which is not the same as the usual id, is there a better method to use in this case? I couldn't find anything relating to data-reveal-id.
The other thing I am trying to change is to change the text cart to "Hello World!'. Again, the method I used does not do anything.
<script> document.getElementById("shopping_cart_btn").innerHTML = "Hello World!"; </script>
Am I using the right ID or am I just completely in the wrong path here?
Thanks :)

for document.getElementById() to work, you need an id attribute set, try:
Text here

change your "data-reveal-id" to just "id" and it should work

You're on the wrong path but you were heading the right direction. You just need to hop tracks and climb onto the document.querySelector() train, leaving document.getElementById behind for now.
getElementById will return an element whose id attribute equals the provided value; it won't look at any other attributes, like data-reveal-id.
querySelector instead uses CSS selectors to select an element. For examples of CSS selectors, refer the W3C documentation here: http://www.w3.org/TR/selectors/#selectors
You would use this like so:
document.querySelector("[data-reveal-id='shopping_cart_btn']").innerHTML = "Hello World!";
document.querySelector("[data-reveal-id='shopping_cart_btn']") is saying "get me the first element you can find whose data-reveal-id attribute is equal to shopping_cart_btn.
Here's a working example to prove I'm not crazy. When the JavaScript runs, it selects the div by its data-reveal-id attribute, then replaces its inner HTML:
document.querySelector("[data-reveal-id='something_random']").innerHTML = "New Text";
<div data-reveal-id="something_random">Original Text</div>

Why isn't my jQuery updating the DOM?

Ok, so I'm making a login screen for an application with a button that says "Not You?" which, when clicked, brings up a text-box to update the username on the screen. The issue I'm having is: the username updates once, but when tried again doesn't work. What's wrong with my jQuery?
Here's my jQuery:
var main = function(){
$('.not').click(function(){
$('.login-wrap').fadeOut(300, function(){
$('.not-you').fadeIn(300);
});
});
$('.enter').click(function(){
$('.name').replaceWith($('.new-input').val());
$('.not-you').fadeOut(300, function(){
$('.login-wrap').fadeIn(300);
});
});
}
$(document).ready(main);
And HERE'S a link to the CodePen.
Thanks!

From the docs, The .replaceWith() method removes content from the DOM and inserts new content in its place with a single call,so for first time it is working fine but when first time .replaceWith() is used it replaces whole '.new-input' with class 'name',that is why afterwards it is creates problems.
Instead of
$('.name').replaceWith($('.new-input').val());
Try
$('.name').html($('.new-input').val());
OR
$('.name').text($('.new-input').val());
see here.

When you are doing replaceWith(), you are actually removing the whole tag with class '.name'.
So in the next time the code is unable to find any object with class 'name'.
Use '.html()' to make it work.

You can change your replaceWith() line with the following:
$('.name').replaceWith("<span class='name'>"+$('.new-input').val()+"</span>");
replaceWith() actually replaces the whole DOM element that has the class of name.
.replaceWith() | jQuery API Documentation

Change getElementsByClassName()[i] field

I'm doing kinda learning by doing JavaScript right know, but I have a problem, where I can not find the solution on stackoverflow. I want to replace a String on a webpage, where I just have the class, but not the ID.
document.getElementsByClassName('ep_price')[0]="FOO"
This should change the defined elemet to FOO, but it does not do that and I have no idea why not...
I have read that I should use .value, but this var is not even defined...
See Screenshot of my Chrome console below:

You need to use .textContent property if you intended to change the text.
document.getElementsByClassName('ep_price')[0].textContent ="FOO"

JQuery .attr won't retrieve or change values

I'm trying to change HTML attributes using jQuery, but no matter what I do, I can't get anything to work with jQuery's .attr().
For testing, I've written
alert($("#logo").attr("title"));
and even though I have an img with id="logo" and a title, the alert remains blank.
My full method:
function switchVideo(videoID) {
var videoPlayer = document.getElementById("example_video_1");
videoPlayer.src = "video/Occam.webm";
videoPlayer.load();
$("#example_video_1").attr("poster", "video/ss.png");
//Doesn't work:
alert($("#logo").attr("title"));
$("#logo").fadeOut();
videoPlayer.play();
}
My fade out works, so I know I imported jQuery correctly.
I've gotten it working in another document, so there must be something else in the document messing it up. Does anyone know why this simple method won't work?
You can see the source page at http://jrstrauss.net/temp/create.html

Your div has the id logo, not the img.
Try:
$("#logo img").attr("title")

You should be using $.fn.prop for that now: http://api.jquery.com/prop/

You should use prop if you are using a recent version of jQuery.

You can also try this according to your HTML:
alert( $("#logo a img").attr("title") );
Demo

You have the following markup with id logo
<div id="logo">
......
</div>
Now, you are trying to run jQuery's .attr method by following code.
$("#logo").attr("title");
as you may know .attr method retrieves attribute value of the given element but that <div> doesn't have a attribute named title. so to confirm this, try retrieving attribute that does exist, for example id. so try this
alert($("#logo").attr("id"));
This will return the value of attribute. the important thing to note is jQuery looks for attributes of given element only, It doesn't scan child elements.
So, to make it work in your case. You need to do the following
alert($("#logo img").attr("title"));
Hope it helps