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...
}
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)
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.
const cardSet = ['fa-diamond','fa-diamond','fa-paper-plane-o','fa-paper-
plane-o','fa-anchor','fa-anchor','fa-bolt','fa-bolt','fa-cube','fa-cube','fa-
leaf','fa-leaf','fa-bicycle','fa-bicycle','fa-bomb','fa-bomb'];
let cardsOpen=[];
let cardsflipped = 0;
let theDeck= document.getElementsByClassName('deck');
window.onload=function startGame(){
shuffle(cardSet);
let cards;
cardSet.forEach(function (){
cards= document.createElement('li');
cards.classList.add('card')
cards.innerHTML='<i class="fa '+ cardSet +'"></i>';
});
theDeck.appendChild(cards);
};
Hello! I have been trying to create a memory game.
This function initiate the game.
But everytime I run the code an error occurs saying appendChild(cards) is not a function.
can someone help?
let theDeck= document.getElementsByClassName('deck');
creates a node list and .appendChild() is not a method of node lists, it's a method of a single node. You'll need to reference a single, specific node and call .appendChild() on that.
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Closed 6 years ago.
trying to fires an event but the console tell me that is not a function
var changeTodoText = document.getElementsByClassName("listeItemTodo");
changeTodoText.addEventListener("click", function () {
alert("go");
}, false);
/* Note that i'm using the strict mode */
document.getElementsByClassName() returns an array of elements with the class name. If you're trying to find one particular element, use an id instead, like this:
<div id="listeItemTodo"></div>
You can then get the element with this:
var changeTodoText = document.getElementById("listeItemTodo");
Here is a JSFiddle to show how my solution works.