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';
}
}
Related
This question already has answers here:
How can I change an element's class with JavaScript?
(33 answers)
Closed 2 years ago.
I dynamically created various images and other elements within various div elements and assigned a class to them, like:
divOM = document.getElementById('omain');
kd = document.createElement('img');
kd.src = 'pics/k0.jpg';
kd.class = 'mww';
divOM.appendChild(kd);
This works well – the debugger shows the desired result (# children with class ‘mww’). I have the (maybe naïve) hope that
wlist = document.getElementsByClassName('mww')
gives me all elements which have class=’mww’, but unfortunately it doesn’t. The debugger shows length:0 for wlist!?? Is it possible that document.getElementsByClassName doesn’t work for dynamically created elements?
Should be .className, not .class.
class is a reserved word in JavaScript.
Or use the Class List API:
kd.classList.add('mww');
This question already has answers here:
Javascript getElementById based on a partial string
(9 answers)
Closed 3 years ago.
I just want to know to how to use custom varible with javascript.suppose we have 5 id with name zawsz,baws2,tawsx,paws4,vawsa and we want to execute single DOM command to all these element whose id is define here.
document.getElementById("-aws-").onclick=function(){}
Here -aws- define all the id define above.(-) can be replace with any char/int value;
You could use the following code:
(The following code will select all elements of which the id includes aws.
I have tested this code and it works: https://jsfiddle.net/5042woqz/)
document.querySelectorAll('*[id*="aws"]').forEach(function(item) {
item.onclick=function() {
console.log('click!');
};
});
Items will now be an array containing all your aws- items.
If you have further questions, just let me know.
P.S.: You could achieve the same thing really easily with jquery.
You can use document.querySelectorAll for this:
document.querySelectorAll('[id^="aws"]')
That will select all elements where the id attribute starts with (^=) "aws".
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:
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';
}
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 8 years ago.
I am trying to access the width of a div to put in a cookie. This is the div:
<div class="tab_panel" style="width:600px">
It is the only div with this class name. It is not an option to specify a unique id for the div. This is the code I have been using in an event to call it but it gives an error:
document.getElementsByClassName(tab_panel).style.width
I know Firefox supports getElementsByClassName, so what am I doing wrong?
It's a string:
document.getElementsByClassName("tab_panel")[0].style.width
Bye
P.S. It's an array
document.getElementsByClassName("tab_panel") returns a collection of nodes, the first of which is referred to by document.getElementsByClassName("tab_panel")[0].
If the node you are searching does not have an inline style="width:' assignment, an empty string is returned from document.getElementsByClassName("tab_panel")[0].style.width.
Missing quotes:
document.getElementsByClassName('tab_panel').....
You should iterate over all elements like this:
var elms = document.getElementsByClassName('tab_panel');
for(var i = 0 ; i < elms.length; i++)
{
alert(elms[i].style.width);
}
Try saying:
document.getElementsByClassName("tab_panel")