How to access the child element - javascript

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();

Related

Jquery, cannot access css properties of dynamically generated element

I am using jQuery to append elements to a div, and all works fine.
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
However, I'd like the div to appear by fading in, instead of abruptly.
I notice though that I get an error when I try to access graphic properties on my dynamically generated element. So this, for example fails:
new_div.hide().fadeIn();
The console reports the following error:
TypeError: jQuery.curCSS is not a function
Do I understand this correctly, that this fails because current css properties are not defined for the dynamically generated element? Or what else can be goingg wrong?
Important edit
Additional checking and working on this pointed out to a complete misunderstanding from my part. This has nothing to do with the fact that the element was dynamically generated. I got the same thing by calling fadeIn() on whatever element.
I sincerely apologize!
I still didn't get, though, why this happens
Adding elements to the DOM takes some time, miliseconds maybe, but it's still a reason for jquery not be able to find the element.
This process might be even slower if the DOM is a large html page.
Write your code like this:
var new_div = $('<div>My stuff</div>');
new_div.appendTo("#container");
setTimeout( function(){
new_div.hide().fadeIn();
} , 150); // 100 could be also good
It might be enough time for jquery to catch the element.
I would add an id to keep track of all elements I'm creating (just my preference, but it makes it easier to code it).
var new_div = '<div id="myNewDiv1" style="display:none;">My Styff</div>'
$('body').append(new_div);
$('#myNewDiv1').fadeIn();
It does seem to be a compatibility question, although I wasn't able to figure out exactly why and how to fix it.
Adding this code fixes the problem though:
jQuery.curCSS = function(element, prop, val) {
return jQuery(element).css(prop, val);
};

Raphael.js text not showing when assigned to variable

I have this weird error, the title pretty much says it all. I'm trying to make a Javascript variable which has a Raphael.js text element as 'value'. Problem is the text is not showing. When I just do paper.text, without assigning the object to a variable the text does show. Has anyone encoutered this? I can't seem to find a solution. Thanks in advance.
var messageObject = paper.text(100,100,"test");

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"

jsFiddle document.getElementById inside iFrame

I know jsFiddle displays it's results in an iFrame. I am taking a JS class right now and according to my instructor, "getElementById" is the most used function in all of JS.
So why doesn't "getElementById" work in jsFiddle:
document.getElementById("myH1")
However...
document.getElementsByTagName("H1")
Does work!
See my fiddle for the example:
http://jsfiddle.net/uM9t4/
document.getElementById("myH1") does work.
I think what you are trying to do is change the attribute of class from having "bye" to having "NO", which doesn't work. You are getting the class and changing it properly, but it is just a string. You have to then reassign it back to the class attribute.
document.getElementById("myH1").setAttribute('class', document.getElementById("myH1").getAttribute("class").replace("bye","NO"));
Or, stashing the element in a variable:
var myH1 = document.getElementById("myH1");
myH1.setAttribute('class', myH1.getAttribute('class').replace('bye', 'NO'));
it does, its just your thinking of how replace works is wrong, it does not do an inline change it returns the changed string, if it didnt work you would be getting an
Cannot call method 'getAttribute' of null
document.getElementById("myH1").getAttribute("class").replace("bye","NO");
should be
var change = document.getElementById("myH1").getAttribute("class").replace("bye","NO");
document.getElementById("myH1").setAttribute("class",change);
JSFiddle

Updating a value of a <span> using Javascript getElementById

I am very new to JS and trying to get my head around how to change values of a span using JS. So, I have a span looking like this:
<span id="s551392614400915" class="vote-count-post" value="551392614400915">0.31</span>
I would like to change the 0.31 to say 150 - and Iam trying to use the getElementById as follows:
var xx=150;
document.getElementById("s551392614400915").value = "150"; //dosent work.
//document.getElementById("s551392614400915").value = xx; //dosent work.
for some reason this does not seem to work. I know I am doing something completely stupid, but I am unable to see where. Here is my rather silly JS Fiddle
any help with this would be great.
Use document.getElementById("s551392614400915").innerHTML= "150" if you want to change the contents of the span.
Use innerHTML instead of value. value is used for form inputs with a user-changeable value.
document.getElementById("s551392614400915").innerHTML = "150";

Categories