I have an interation loop on which I need to click on every element:
var spans = document.getElementsByClassName('span')
for (var i = 0; i < spans.length; i += 1) {
i.click(function() {
console.log("Clicked")
});
}
I get i.click is not a function error. ¿What am I missing?
Thanks!
i is the index, not the element. This is how you would fix your code:
var spans = document.getElementsByClassName('span')
for (var i = 0; i < spans.length; i += 1) {
spans[i].click(function() {
console.log("Clicked")
});
}
But 'click' also doesn't take a callback. This is how your code should look like in 2022:
const spans = document.getElementsByClassName('span')
for (const span of spans) {
span.click();
console.log("Clicked")
}
Related
I need to add elements to container on a first click and delete it on a second one. I guess I'm trying to make it super hard while there is a more elegant and clear solution. Fiddle Link
I was thinking of arrays to create a 1st array for clicked elements and the 2nd one for elements that are already in a container. Then filter the first array through the second one and delete those (unmatched) elements from my container.
var click = +$(this).data('clicks') || 0; // Check if contacts cliked first time
if (click % 2 == 1) { // 2nd click
fruits.splice($.inArray(name, fruits), 1); // Remove Name from an array
$(".test .single").each(function (index, elem) {
compArr.push($(this).text());
});
keyArr = fruits.filter(i => compArr.indexOf(i) !== -1);
var i = 0;
for (; i < keyArr.length; i++) {
$(".name").each(function () {
$(".single:not(:contains('" + keyArr + "'))").remove();
});
} // I guess problem is here
} else { // 1st click
fruits.push(name);
$('.test textarea').css({
'font-size': '12px',
'border': '0'
}).prop('placeholder', '').before('<span class="single">' + name + '></span>');
$('textarea').val('');
}
$(this).data('clicks', click + 1);
For me, this part doesn't work properly. But I would love to hear any of your suggestions even if the entire logic is wrong. Thanks!
var i = 0;
for (; i < keyArr.length; i++) {
$(".name").each(function () {
$(".single:not(:contains('" + keyArr + "'))").remove();
});
}
I've managed to fix it. Added this code:
let deleteSingle = $('.single');
for (let i = 0; i < deleteSingle.length; i++) {
for (let j = 0; j < arrayNewKeys.length; j++) {
if (deleteSingle[i].innerHTML.includes(arrayNewKeys[j])) {
deleteSingle.eq(i).addClass('a');
break;
} else {
deleteSingle.eq(i).removeClass('a');
}
}
}
$('.styleContacts:not(.a)').remove();
if ($('.test > .single.a:only-child')) {
$('.single.a').removeClass('a');
}
Instead of this:
var i = 0;
for (; i < keyArr.length; i++) {
$(".name").each(function () {
$(".single:not(:contains('" + keyArr + "'))").remove();
});
} // I guess problem is here
Im injecting some number of buttons in my DOM using a for loop
function injectBtn () {
var output = '';
for(var i = 0 ; i < someNumber ; i++){
output += `<button id="button${i}">`;
}
document.getElementById('list').innerHTML = output;
}
Further I want to add event listeners to them like this, but nothing happens when I click them.
function addEvents () {
for (var i=0 ; i < someNumber ; i++) {
var btn = document.getElementById(`button${i}`);
btn.addEventListener('click', function () {
console.log('click');
}
}
}
I checked in my console, and I'm sure the buttons have been added to the DOM. What am i doing wrong?
Here's my code:
var never = [1,2,3,4,7];
function please () {
for (var i = 0; i < never.length; i++) {
document.getElementById("more").innerHTML = "<button>" + never[i] + "</button>";
}
}
I have a button in my HTML that invokes this function but it only creates a button for the last item (7). How can I create a different button for each one of the items in the array? Any help is appreciated.
The best way is to append created buttons in container.Each by each
var never = [1,2,3,4,7];
function please () {
var more=document.getElementById("more");
for (var i = 0; i < never.length; i++) {
var butt=document.createElement("button");
butt.innerHTML=never[i];
more.appendChild(butt);
}
}
By appending to innerHTML instead of assigning, like
var never = [1,2,3,4,7];
function please () {
for (var i = 0; i < never.length; i++) {
document.getElementById("more").innerHTML += "<button>" + never[i] + "</button>";
}
}
please();
<div id="more">
</div>
The code is
//Logic which works when the desired element is clicked
function changeArtistPhotoAndBio(prop) {
var artistPhoto = document.getElementsByClassName("artist-photo")[0];
var artistBio = document.getElementsByClassName("artist-bio")[0];
var i = prop.getAttribute("src").indexOf(".jpg");
var photoName = prop.getAttribute("src").slice (0, i);
artistPhoto.style.background="url(" + photoName + "-large.jpg";
console.log("it happened");
};
//Setting listeners for the click event in the loop
var artists = document.getElementsByClassName("gallery")[0].getElementsByTagName("img");
for (var i = 0; i < artists.length; i++) {
artists[i].addEventListener("click", changeArtistPhotoAndBio(artists[i]));
}
And the console output is
7x it happened
And the event handler for the click function does not work. I've tried isolating handler in the closure, like this:
for (var i = 0; i < artists.length; i++) {(function(i) {
artists[i].addEventListener("click", changeArtistPhotoAndBio(artists[i]));
}(i))
}
but the output is still the same. So there are two questions:
1) Why does the console output contain results of seven handler invocations if I did not invoke the function, just set it as a handler?
2) How can I set handlers in the "for" loop for HTML collection?
You have to use closures:
var artists = document.getElementsByClassName("gallery")[0].getElementsByTagName("img");
for (var i = 0; i < artists.length; i++) {
artists[i].addEventListener("click", function(index) {
return function() {
//You can use index for the current clicked item index
// console.log(index);
var artistPhoto = document.getElementsByClassName("artist-photo")[0];
var artistBio = document.getElementsByClassName("artist-bio")[0];
var i = this.getAttribute("src").indexOf(".jpg");
var photoName = this.getAttribute("src").slice (0, i);
artistPhoto.style.background="url(" + photoName + "-large.jpg";
console.log("it happened");
}
}(i));
}
$('body *').on('mouseover',function(){console.log(this.tagName)});
$('body *') selects all elements within the body.
I am trying to dynamically add onclick function to "li" tagged elements.
But the event does not fires.
Here is my code:
var arrSideNavButtons = [];
var sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li');
var arrayOfSceneAudios = [scene1Audio, scene2Audio,...];
for (var i = 0; i < sideNavLi.length; i++) {
sideNavLi[i].onclick = function() {
arrayOfSceneAudios[i].play();
}
arrSideNavButtons.push(sideNavLi[i]);
}
Is it possible to code it this way?
If yes, what is my mistake?
Thanks a lot.
Wrap your onclick handler in a closure, else it only get assigned to the last elem in the loop:
for (var i = 0; i < sideNavLi.length; i++) {
(function(i) {
sideNavLi[i].onclick = function() {
arrayOfSceneAudios[i].play();
}
arrSideNavButtons.push(sideNavLi[i]);
})(i)
}
I think it's better to reuse one single function, instead of creating a new one at each iteration:
var arrSideNavButtons = [],
sideNavLi = document.getElementsByClassName('side-nav')[0].getElementsByTagName('li'),
arrayOfSceneAudios = [scene1Audio, scene2Audio,...],
handler = function() {
this.sceneAudio.play();
};
for (var i = 0; i < sideNavLi.length; i++) {
sideNavLi[i].sceneAudio = arrayOfSceneAudios[i];
sideNavLi[i].onclick = handler;
arrSideNavButtons.push(sideNavLi[i]);
}