This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Can getElementsByClassName change style?
I am trying to "fix" the "new" YouTube using Greasemonkey, I've been getting things to work as they should when it's with ID's, however I have been unable to modify anything with a class, it appears I am unable to select it or whatever anyways.
I have been trying to use:
document.getElementsByClassName("video-extras-sparkbar-likes").style.height='10px';
However it isn't working. :\
I'm not very familiar with Greasemonkey and what not, so would there be a reason why though my browser supports this, Greasemonkey may not?
You might need to loop through the results, like this:
var divs = document.getElementsByClassName('video-extras-sparkbar-likes');
for(var i=0; i < divs.length; i++) {
divs[i].style.height = '10px';
}
Related
This question already has answers here:
Is there a spec that the id of elements should be made global variable?
(5 answers)
Why don't we just use element IDs as identifiers in JavaScript?
(5 answers)
Closed 1 year ago.
I wrote this code which loops through all elements with an ID, and declares a variable with the same name as the ID refering to that element. The code works as expected and by using this at the top of my program I save a lot of time and lines in my program. However it almost seems to good to be true because I have never seen it done before.
I know using eval() is bad practise and wonder if using window[], like I do here, has the same effect. My question is if using this code is good practise or if it should be avoided?
<div id="content1"></div>
<div id="content2"></div>
<div id="content3"></div>
<div id="content4"></div>
<script>
var elements = document.querySelectorAll("[id]");
for (var i = 0; i < elements.length; i++){
window['elements[i].getAttribute("id")'] =
document.getElementById("${elements[i].getAttribute('id')}");
};
content1.innerHTML = `<p>Hello World</p>`;
</script>
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 2 years ago.
I'm new to javascript and I got no clue what's not working, i'm just trying to get the background of some h2 with the class "titre" to turn blue. For some reason, if it's a getElementById it works fine but if I use getElementsByClassName it doesn't work and I don't get suggestion after style.
I know I should just use CSS without js to do it but it's a school thing and I need to do it like that.
Thank you.
My js code:
function titre2(){
var titreback = document.getElementsByClassName("titre");
titreback.style.backgroundColor = "blue";
}
my HTML (where my class is):
<section>
<article>
<h2 class="titre" onblur="titre2();">Qu'est-ce que <em>Facebook</em> ?</h2>
I suggest you take a deeper look at Chrome dev tools. (assuming that's what you're using)
Find out how to set a breakpoint to see what exactly you're trying to manipulate.
That or console log your results.
the function .getElementById returns 1 element, while the function getElementsByClassName returns multiple elements!
So yes the above answer holds the key ;D
GL!
getElementsByClassName returns a HTMLCollection you need to loop through them to set the style.
function titre2(){
var titreback = document.getElementsByClassName("titre");
for (let item of titreback) {
item.style.backgroundColor = 'blue';
}
}
This question already has answers here:
How to get value at a specific index of array In JavaScript?
(8 answers)
Closed 2 years ago.
so I am currently learning javascript on Codecademy. And a weird kind of thing got introduced that I don't quite get.
if you look at the code. you see at the end in console that after logging animals it is a [i] like why is that there? I get that is has something to do with the for loop. But I don't quite understand like why or what that it does. I don't know if question is clear enough but if you just try to explain why it is there and what it does there. that would be greatly appreciated:)
const animals = ['Grizzly Bear', 'Sloth', 'Sea Lion'];
for (let i = 0; i < animals.length; i++){
console.log(animals[i]);
}
the bracket notation is used to specify the index of the array you are looping through. You can always read more about javascript arrays on w3schools
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 5 years ago.
I have looked around and I haven't really been able to find anything that solves my problem. There is a post using buttons but I can't seem to modify it for my needs.
I am trying to use only one event listener for multiple selects. I'd like to return the id of the select, and the value selected but as far as I can figure I either need to use document.getElementById("ID").addEventListener('change',func(),true) for each id or document.getElementsByTagName('select').addEventListener('change', func(), true) and I get an error that says:
selection.addEventListener is not a function. (In 'selection.addEventListener('change', func(), true)', 'selection.addEventListener' is undefined)
I was hoping someone could take a moment and show me where I am going wrong or if I need to use a different method to accomplish my task.
thanks for the help
The method getElementsByTagName returns HTMLCollection of elements, and not a DOM Element, so you can't use addEventListener on that.
What you can do is go over all the elements in the HTMLCollection and add the event you want to them:
let selectElements = document.getElementsByTagName('select');
Array.prototype.forEach.call(selectElements, function(el) {
eladdEventListener('change', func(), true)
})
This question already has answers here:
Performance of jQuery selectors vs local variables
(5 answers)
Closed 7 years ago.
I have a strange question about jquery selector behavior.
First approach:
$('#div').find('#something').html('hahah');
$('#div').find('#something').html('hahah');
$('#div').show();
Second approach:
var $div = $('#div');
$div.find('#something').html('hahah');
$div.find('#something').html('hahah');
$div.show();
I know that it might not have too much difference, but is the second faster than the first?? I've always used the second approach but I'm not sure if there is a difference because I don't know how the jquery selector algorithm works.
The second way is faster/better because you have cached the selector.
Everytime you call $('selector'), the jQuery selector engine(sizzle) is called to locate your desired elements.
However, when you store them in a variable, you do not need to repeatedly call the selector engine as the results are stored.
Note, in your example above, caching can be further improved by storing the find() result as well
var $something = $('#div').find('#something');
$something.html('hahah');
$something.html('hahah');
$something.show();