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)
})
Related
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:
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:
jQuery hasAttr checking to see if there is an attribute on an element [duplicate]
(9 answers)
Closed 5 years ago.
How do I find a certain attribute exists or not for a selected item in jQuery?
For example, selected element jQuery('.button'), now this can have an attribute 'xyz'. How do I get whether it is having that or not?
You can use the hasAttribute method:
// Attach the event to the button
$('button').on('click', function() {
// This will refer the element from where event has originated
if (this.hasAttribute("style")) {
alert('yes')
} else {
alert('no')
}
})
If you want to use the jQuery library, you can directly use the attr method in the if condition.
if($('#yourElement').attr('someProp')){}
Alternatively, you can also use the jQuery is selector:
if ($(this).is('[style]')) {// rest of the code}
DEMO
You have two solutions that I know of. 1) Native Javascript has a function for this .hasAttribute() (e.g. $(this)[0].hasAttribute('name');). 2) Using jQuery, you can check if $(this).attr('name') is undefined or not.
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();
This question already has an answer here:
How do you assign an event handler to multiple elements in JavaScript?
(1 answer)
Closed 7 years ago.
I am trying to run a function when user clicks on a class.
Here is a fiddle with a similar setup. Except that I am not using buttons in the my code.
FIDDLE
document.querySelectorAll('.menu').onclick = function () { alert("test"); };
I've also tried using the getElementsByClassName, with the same results. Is there something I am missing here?
*Note: I need to accomplish this without jQuery
querySelectorAll returns a list of elements, so you need to specify the one you want, in your case [0]:
document.querySelectorAll('.menu')[0].onclick = function () {
alert("test");
};
jsFiddle example