This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Want to add "addEventListener" on multiple elements with same class [duplicate]
(3 answers)
Closed 1 year ago.
I'm trying to add a eventlistener to a class but it's not working at all, I have done the same method with ID's and it worked perfectly but it's not working for classes. I'm still kinda new to Javascript so I apologize if it's something very simple.
const boxes = document.getElementsByClassName('box_img');
boxes.addEventListener("click", function(){
console.log('Hi');
});
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 9 months ago.
I wrote the following to manually make changes to a button when clicked
const links = document.getElementsByTagName('a');
links.addEventListener('click', () => {
links.classList.add('clickedLink');
})
..but the threw an error
TypeError: links.addEventListener is not a function
at /script.js:4:7'
..what seems to be the problem?
It says getElements,hence more elements,so you should run a loop for adding the event listeners on each element
for(let link of links){
link.addEventListener...
}
This question already has answers here:
How to correctly iterate through getElementsByClassName
(10 answers)
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 9 months ago.
This post was edited and submitted for review 9 months ago and failed to reopen the post:
Original close reason(s) were not resolved
I want to add HTML to all elements having same class (.testimonial-text). However Everytime I use querySelectorAll to define the elements, insertAdjacentHTML returns an error that say 'insertAdjacentHTML in not a function' . It works fine when I user querySelector (which targets only first element of the class) but again I want to target and insert html on every element of the class.
var testimonialText = document.querySelectorAll(".testimonial-text");
const testimonialTextBack = function () {
const html = `<p>Testing</p>`;
testimonialText.insertAdjacentHTML("beforeend", html);
};
testimonialTextBack();
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
querySelector and querySelectorAll vs getElementsByClassName and getElementById in JavaScript
(11 answers)
querySelectorAll didn't working but querySelector did
(2 answers)
Closed 4 years ago.
I am trying to change the colors of each element(button) within a node list with one line of code. First, I made the node list:
var buttons = document.querySelectorAll('button');
Now what I would like to do is change the color of each of the buttons, with one line of code. I tried
buttons.style.color = "green";
This returns an error saying that buttons is undefined. I assume that it's not possible to change all elements with that line of code, and I have been unable to find another way to do so. So if anyone knows, help would be appreciated.
with [].slice.call(document.querySelectorAll('button')); you get an Array and its more easy to work with arrays than nodelist
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 4 years ago.
My Code is:
document.getElementsByName("username").value = "DUBISTFAKE"
does not work pls help me im new to Js.
Try this.
document.getElementsByName('username')[0].value = 'DUBISTFAKE'
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 7 years ago.
I dont understand why when i click those elements with class click-to-open this function below does not work im trying to make something like a javascript accordion
document.getElementsByClassName('click-to-open').addEventListener('click', function(){
document.getElementsByClassName('click-to-open').style.maxHeight = '40px';
this.style.maxHeigh = '500px';
});
Try this one :
var clickToOpen=document.getElementsByClassName('click-to-open');
for(var i=0;i<clickToOpen.length;i++){
clickToOpen[i].addEventListener('click', function(){
this.style.maxHeight = '500px';
});
}
The method getElementsByClassName() always returns a set of class array, if you want to target all the DOM elements you need to iterate through all of them, if you were using Jquery there is a much more elegant way to do it.
This is a demo: https://jsfiddle.net/2tx2s3rz/2/ showing the code