How do I target $0 without getElementById [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
I am trying to find the appropriate way to edit an element but it seems like their is only one node with an ID. I have thought of
my code looks like:
var root=document.getElementById("app-mount").childNodes;;
var child = root[n].innerHTML;
But this is not reusable to get the path to any element such as $0 used in chrome dev tools. I was wondering if there was a method one could call on $0 to just give me the path so one could know how to target it as one does for an ID document.getElementById('id');
Edit:
after getting help I have updated my code to look like:
document.querySelectorAll('svg')[1].outerHTML="<img id='orb' class='orb' src='https://i.imgur.com/k3d8qMN.gif' width='50' height='60'>"
Its for a theme I am making for discord!
Thanks for the help!

I am not sure that I am following your question very well, but if I understand you correctly, you are looking for something like querySelector or querySelectorAll.
You can use CSS commands to target various HTML elements. eg:
document.querySelector('div'); //returns the first div
document.body.querySelectorAll('div'); //returns all the divs attached to the body element
You can also target ids:
document.querySelector('#app-mount');
or classes:
document.querySelector('.blue');
and query selectors may also be used:
document.querySelector('#app-mount > ul > li:nth-child(3)');

Related

How do I make my code rerun/change when a certain element's value changes in Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
In my case I run the code
var a = document.getElementById("txtTehtav").textContent.match(/\d+/g)
let [x, y] = a
var answer = x*y
alert(answer)
The element which I would like to watch is txtTehtav.
The code for the element is <a class="thrida" id="txtTehtav" name="txtTehtav">3x4=</a>
So whenever the textContent of txtTehtav changes (in this case 3x4) I want my code to rerun/update so x and y would change, where as 3 would be x and 4 would be y.
(for example my code would give the answer for 3x4 and when it will change to something like 2x4 my code would detect it and rerun it/update the answer)
How do I make my code rerun when that happens?
Any help would be greatly appreciated!
Depends on your setup:
If you know which code changes the text content of your DOM element, you can adjust it to call your function or listen to any events that code might trigger.
If you don't, you can use MutationObserver to listen for DOM changes. Read more about them on MDN

get multiple Elements By Tag Name in JavaScript? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
Hello there am trying to make an image gallery for example lets say that I have multiple images and I want to change their opacity when I hover over them by using JavaScript I know that this is possible with CSS but am trying to accomplish this with JavaScript I tried using get Elements By Tag Name method but the problem it just can access one element by time so can I do that thanks
Try this:
var elements = document.getElementsByTagName("img");
Array.prototype.forEach.call(elements, function (e) {
// Here you can access each image individually as 'e'.
});
When you hover, get the ID of that image. Then loop through all images (example above) and set their opacity. If the element is equal to the one you clicked on (remember, you just took the ID so you can use it), just skip to the next one using continue;.
you have to collect you image elements like
var images = document.getElementsByTagName("img");
then you have to do like
Array.prototype.forEach.call(images, e => e.addEventListener("mouseover", function( event ) { do something}));

Storing a reference to an element dynamically added by append [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have added a new element dynamically through jQuery like this:
var elem = $('#unique').append($('<span>').attr('data-rollNo', i));
Now I need to use this element after this to add something to it. Is there a way I can store a reference to this element here, so I done need to search the entire DOM every time I edit this?
Use appendTo method instead of append:
var $span = $('<span>').attr('data-rollNo', i).appendTo('#unique');
Now, span is appended and you also have a reference to this new object.

How to remove spaces between words in a link? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Shortened up:
I need
View in iTunes
to appear as
View in iTunes
Detailed:
So basically what I'm doing is I'm trying to link to the itunes store I'll use this link as an example itunes.com/OfMonstersandMen/MyHeadIsAnAnimal.
This links directly to the item on the iTunes store. I'm using blogger and I'm going to automatically fill the links. The only problem with that is the links will appear as itunes.com/Of Monsters and Men/My Head Is An Animal. So what I need to do is use javascript or jquery to remove the spaces between the words in the link.
I've been looking all over for a solution. Is there anything I can do to fix this??
jsBin demo
$('.view-itunes a[href*=" "]').prop('href', function(i, v){
return v.replace(/%20/g,"");
});
Cause the browsers translates blanks inside href with %20
View in iTunes
<a id="result">View in iTunes</a>
<!--this is a example to result:-->
<b></b><br>
jquery
var aq = $('a').attr('href').split('%20').join('');
$('#result').attr('href',aq);
//this is a example to result:
$('b').text(aq);
Just use string replace function
var a="test%20string";
var b=a.replace(/%20/g, "");

GetElementByClass of An Element Within Another Element [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I need to get the element by class of "balls" from the div gameContent.
Basically grabbing the lottery numbers from Play4 from this site:
http://www.flalottery.com/play4.do
How can I get the element by class from another class? If I just do balls, all of the numbers show up, which aren't relevant and would mess up data.
Do you mean something like this:
document.getElementsByClassName('gameContent')[0].getElementsByClassName('balls')
Get elements by class "gameContent" followed by "balls". Query assumes that the first gameContent is what we are interested in.
Hope this helps.
you can use the following query selector
var elems = document.querySelectorAll(".gameContent .balls")
That is pure JavaScript. You can of course use the same query selector for jQuery
For instance with jQuery this would be
var elems = $(".gameContent .balls")
Notice how the query selector is identical.
Did you try
$(".gameContent .balls")
Judgeing by the page you've included in your question, you'll probably want to iterate through the <span> elements to get each ball number:
$('.gameContent .balls').each(function(){
alert('next ball: '+$(this).html())
});

Categories