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
Related
This question already has answers here:
jQuery ID selector works only for the first element
(7 answers)
Closed 2 years ago.
I have the following code snippet
$("#personalizacoesOpcionais")
.find(".qtdPersonalizacao")
.each(function (n, t) {
var i = {};
i.IdProdutoIngrediente = parseInt($(t).attr("data-id"));
i.Qtde = parseFloat($(t).text());
r[n] = i
});
In the html there are several divs personalizacoesOpcionais and each one with numerous elements qtdPersonalizacao.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
However, the code snippet above only returns the first item qtdPersonalizacao within the first personalizacoesOpcionais.
Ids are supposed to be unique within a document and jQuery will just returns the first matching element.
The recommended solution would be to use a class instead of an id for personalizacoesOpcionais.
If this is not possible, for example if you don't control the code that generate the markup, a workaround would be to use $("div[id=personalizacoesOpcionais]") instead of $("#personalizacoesOpcionais")
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 selector on multiple id
(2 answers)
Closed 5 years ago.
Sorry for that simple question, but how do I add multiple triggers to a jquery-click-event?
I tried that one here
$("#trigger1","#trigger2").click(function() {
//something
});
But that doesn't work. What is the correct syntax there?
Should be like :
$("#trigger1, #trigger2").click(function() {
//Put your logic here
});
Just remove the extra quotes.
Hope this helps.
The reason why your code is not working is you are using a context selector. So what it is saying is: Find #trigger2 and inside of that look for #trigger1.
But what you want is to use a multiple selector.
$("#trigger1, #trigger2").click( ... )
Or I would just use a common class so you do not have to keep track of the ids
$(".commonClass").click( ... )
Or something like
$(document).on("click", "#trigger1, #trigger2, #trigger3", function () {
//do stuff
});
This will let you add as many listeners as you want on multiple DOM elements
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:
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.