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
Related
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)
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');
});
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
I gave my elements a class. I then run in javascript
document.getElementsByClassName("class").style.padding = "20px"
but it didin't work. Is the problem that in javascript padding doesn't work with classes?
getElementsByClassName returns an array-like object, so you either need to iterate over all of them in a loop, or specify the individual elements you want to change. It works when you change to an ID because ID's must be unique.
Ex:
var elems = document.getElementsByClassName('class');
Array.prototype.filter.call(elems, function(testElement){
testElement.style.padding = "80px"
});
jsFiddle example
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
On my site, as a little footer I guess, I use the tag <joexn id="yo">
and the javascript
var div = document.getElementById('yo');
div.insertAdjacentHTML( 'beforeBegin', 'joexn.com' );
This produces a watermark/footer and want I want to know is how can I change it so the tag is just <joexn> using Javascript only. I want minimalist code only and no clutter. I tried using document.getElementByTagName('joexn'); but that didn't work.
What's the easiest method?
I don't know why this has been marked as duplicate, it is nothing like that other question.
try using document.querySelector(): DEMO
var div = document.querySelector('joexn');
div.insertAdjacentHTML( 'beforeBegin', 'joexn.com' );
document.getElementsByTagName('joexn') should work. Mind you, you have a typo in the usage of this method. It is getElements and not getElement.
This method returns an HTMLCollection object which is an array-like object. So, to get the element itself, you can do
var joexnElement = document.getElementsByTagName('joexn')[0];
And, then do the rest...
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