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.
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 access the correct `this` inside a callback
(13 answers)
JavaScript setInterval and `this` solution
(9 answers)
How do JavaScript closures work?
(86 answers)
Closed 10 months ago.
I've noticed when using setInterval() with objects, it accepts this:
setInterval(function(){auto1.increaseValue(s);}, auto1.interval);
Where auto1 is an object from a class.
However, the program throws an error when I put an object or object of an array of another object inside the function.
Ex.
let index = this.arrayForItems.length-1;
setInterval(function(){this.arrayForItems[index].increaseValue(s);header.innerHTML = s.value;}, this.arrayForItems[index].interval);
setInterval(function(){this.item.increaseValue(s);header.innerHTML = s.value;}, this.item.interval);//Where item is the object inside object shop
But this works.
let index = this.arrayForItems.length-1;
let referenceToPurchase = this.arrayForItems[index];
setInterval(function(){referenceToPurchase.increaseValue(s);header.innerHTML = s.value;}, referenceToPurchase.interval);
Why is this so?
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.
This question already has answers here:
Why am I getting TypeError: obj.addEventListener is not a function?
(3 answers)
Closed 6 years ago.
I am trying to convert the text in a td cell to "Clicked!" when it is clicked upon, but it throws up an error when loading the JS. I have read around and know that it can't use an array like this but I don't know how to fix it.
window.addEventListener("load", table)
function table(){
var tables = document.getElementsByTagName("td");
tables.addEventListener("click", clicked);
}
document.getElementsByTagName returns not a Node object, but NodeList object. You can access Node objects by index.
Sample:
var tables = document.getElementsByTagName("td");
if (tables.length) {
tables[0].addEventListener("click", clicked);
}
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByTagName
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