This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
I have multiple html elements with same class name i want to know which element clicked in pure javascript
link a
link a
link a
in javascript i tried a lot of solutions but all i found working with one element only
what i wrote so far
var dd = document.getElementsByClassName('messages-email');
dd.onclick() = function(ee){
// if i clicked the first link i want to get data-wow which is 1
// and if i clicked the third one i wanna get data-wow which is 3
console.log('i want the clicked elemet attribute ')
}
There are a few issues with your code:
There is no element with the class message-email in your markup. I suppose it's simply a mistake when you're attempting to demonstrate your markup, and that you are referring to the anchor elements with the wow class
document.getElementsByClassName returns a Node collection. You will have to iterate through the collection in order to bind the click event. You can use Array.prototype.forEach.call(<NodeCollection>, function(element) { ... }) to iterate through your node collection
Do not use .onclick to bind click event, as that will override any onclick handlers. You should be using .addEventListener('click', function() {...}) instead
In order to access data-wow attribute, use the HTML5 dataset API
With that in mind, here is a proof-of-concept example:
var dd = document.getElementsByClassName('wow');
Array.prototype.forEach.call(dd, function(element) {
element.addEventListener('click', function() {
console.log('data-wow value is: ' + element.dataset.wow);
});
});
link a
link a
link a
Bonus: If you are familiar with ES2015 (aka ES6), there is an even easier way to do this:
const dd = document.getElementsByClassName('wow');
Array.from(dd).forEach(element => {
element.addEventListener('click', () => {
console.log('data-wow value is: ' + element.dataset.wow);
});
});
link a
link a
link a
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I'm trying to use
onmouseover="document.getElementsByClassName().style.background='color'"
to change the color of all divs with a given classname to another color when hovering over another page element.
Here is a jsfiddle -if anyone could give a few helpful pointers as to where I'm going wrong that would be great, I'm sure it's something really obvious that I'm missing. It worked with document.getElementById, but that only changed the color of the first div, not all of them.
Thanks :)
As the function name suggests getElementsByClassName returns a collection not just one object. So you need to loop through them and apply the color to it.
document.getElementsByClassName()
^_______
Plus your id part is invalid. Id cannot have spaces and also it shouldn't appear again on the page which is violated by:
<th id="colorswitcher A" onmouseover="document.getElementsByClassName('a').style.background='red'">a</th>
<th id="colorswitcher B" onmouseover="document.getElementsByClassName('a').style.background='blue'">b</th>
You can do it this way (You can look up what is a handler and try play yourself with it.), don't use inline attributes for handlers.
window.onload=function(){
var aColl = document.getElementsByClassName('a'); //Cache the collection here, so that even a new element added with the same class later we can avoid querying this again by using the cached collection.
var bColl = document.getElementsByClassName('b');
document.getElementById('A').addEventListener('mouseover', function(){
changeColor(aColl, 'red');
});
document.getElementById('B').addEventListener('mouseover', function(){
changeColor(bColl, 'blue');
});
}
function changeColor(coll, color){
for(var i=0, len=coll.length; i<len; i++)
{
coll[i].style["background-color"] = color;
}
}
Fiddle
If you are really trying to do it for some real work, then don't change the style attribute, instead define classes and add/remove classes on mouseover, mouseout events so that you get the power of css' cascading property.
This question already has answers here:
jQuery: this.attr() not a function?
(2 answers)
Closed 6 years ago.
I added listener to element, which has been created dynamically - according to this -
Jquery event handler not working on dynamic content [duplicate]
.
But how can I get id of the element?
$(document.body).on('click', '.list-group-item', function(){
var itemId=this.attr("id");
This approach is wrong - the outcome is:
TypeError: this.attr is not a function
So in this case - how can I get id of my '.list-group-item' which has been clicked?
Use $(this).attr("id") to get id of element
$(document.body).on('click', '.list-group-item', function(){
var itemId = $(this).attr("id"); // update this
})
Inside the click callback function, this is the HTML element that was clicked
therefore, you can simply use
this.id;
or, if you prefer to use jQuery even when it isn't required
$(this).attr("id");
Try this syntax. You need to refrence this as $('this')
$(this).attr('id');
$(document.body).on('click', '.list-group-item', function(){
var itemId=$(this).attr("id");
}
This question already has answers here:
What is the "hasClass" function with plain JavaScript?
(14 answers)
Closed 6 years ago.
I am making a simple calculator. All buttons have .button class attached. However, I also want the numbers to have a .number class attached and operators to have an .operator class.
Using JS to select the element, I can use this but it only works if the element has one class name (.button):
document.body.addEventListener('click', function (e) {
if (e.target.className === 'button') {
document.getElementById('display').innerHTML = e.target.innerHTML;
e.target.style.opacity = '0.9';
setTimeout(function() {
e.target.style.opacity = '1';
}, 150);
}
});
If I add the .number class to the html elements, this stops working. I need to be able to choose all buttons using .button class OR only buttons with .number class, etc.
Is there a way to do this so that I can select elements that have more than one class name using only one class name?
No jQuery, please.
use classList's contains() method to test for existence a class on a element.
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
This question already has answers here:
JQuery Multiple selectors, $(this) reference?
(3 answers)
Closed 9 years ago.
I'm trying to highlight a multiple links when one clicked. The problem is that only one link that's clicked is highlighted but not all three links.
Here is the code:
$('#vid_link0, #vidtop_link0, #vidmob_link0').click(function() {
$('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link]').css('background-color','inherit');
$(this).css('background-color','#A9CDEB');
});
This should make #vid_link0, #vidtop_link0, #vidmob_link0 highlighted when one of them clicked. But only the one that's clicked is highlighted. Any idea?
var vid_all = $('#vid_link0, #vidtop_link0, #vidmob_link0'); //cache selector
vid_all.click(function () {
$('[id^=vid_link],[id^=vidtop_link],[id^=vidmob_link]').css('background-color', 'inherit');
vid_all.css('background-color', '#A9CDEB'); //change color of all elements
});
this refers to the current element clicked so it changes the background-color of that element,
Guess nobody cares for readability anymore?
var links = $('#vid_link0, #vidtop_link0, #vidmob_link0')
links.click(function() {
links.css('background-color','#A9CDEB');
});
http://jsfiddle.net/ZLdMx/
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Selecting element by data attribute
I'm trying to listen to when an element with a certain data attribute is clicked but I can't seem to get the on click working and I'm sure its something easy on my part that I'm missing. I have
<a href="/home" data-spinner="true" />
$.data('record').click(function() {
//Do Action
});
I have that with variations. My question is, how can I use an data attribute with on click?
Easy solution to your problem: (Not tested)
$('a[data-spinner="true"]').click(function(event) {
});
This selects all elements with the data-spinner attribute, regardless of the value of the attribute.
$( "[data-spinner]" ).live( "click", function () {
console.log('clicked');
} );
The following code binds click event to all <a> elements which have data-spinner attribute equal to true:
$("a[data-spinner='true']").click(function() {
//Do Acction
});