Javascript click event in for loop not working? - javascript

function albumCoverDisplay() {
var i = 0;
for (i = 0; i < albumCover.length; i++) {
albumCover[i].addEventListener("click", function() {
for (var i = 0; i < albumCover.length; i++) {
albumInfo[i].style.display = "none";
}
albumInfo[i].style.display = "block";
});
}
}

Looks like you want to be able to hide other albumCover elements on clicking one of them.
There are a couple of mistakes
Your inner for-loop re-localize the scope of i, use different variable
i's value (assuming another variable is used in inner for-loop) will not remain same when the click will happen.
Make it
function albumCoverDisplay()
{
for (let i = 0; i < albumCover.length; i++) //use let instead of var
{
albumCover[i].addEventListener("click", function() {
for (var j = 0; j < albumCover.length; j++)
{
albumInfo[j].style.display = "none";
}
albumInfo[i].style.display = "block";
});
}
}

Related

innerHtml and for loop

i want to write a short code i have multi contenteditable divs and i use a function to put the value of the div to a textarea please check with me
var myContentArr = ["myContent1", "myContent2", "myContent3", "myContent4", "myContent5", "myContent6"];
var hiddenArr = ["hidden1", "hidden2", "hidden3", "hidden4", "hidden5", "hidden6"];
function myFunction(){
for (var i = 0; i < hiddenArr.length; i++) {
document.getElementById(hiddenArr[i]).value =
for (var i = 0; i < myContentArr.length; i++) {
document.getElementById(myContentArr[i]).innerHTML
}
}
return true;
}

Div not showing when onClick Function runs

I wanted to make a specific form show and the other forms disappear when I click on one of four dropdown buttons. When I tested the code, no from is showing when I clicked on a button.
Here is my javascript code:
function showClass(className)
{
var allItems = document.getElementsByClassName('change-form');
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
It shows the form if I remove the top for loop.
Edit: Sorry guys I made a typo
Your code is going in and hiding all the items and then showing them right away. What you want to do is split the hide and show into different functions to trigger them at different times.
function showClass(className)
{
var formItems = document.getElementsByClassName(className);
for (var i = 0; i < formItems.length; i++)
{
formItems[i].style.display = "block";
}
}
function hideClass(className){
var allItems = document.getElementsByClassName(className);
for (var i = 0; i < allItems.length; i++)
{
allItems[i].style.display = "none";
}
}
If you want to be able to swap them with one function you could use this:
function swapHide(className){
var firstItem = document.getElementsByClassName(className)[0];
var isDisplayed = firstItem.style.display == "block"
if(isDisplayed){
hideClass(className);
}else{
showClass(className)
}
}

Making blocks visible/invisible using javascript

Here is my code.
var i = 0;
var submenues = document.getElementsByClassName("submenu");
var click = 1;
function submenuvisible() {
if (click == 1) {
for (i; i < submenues.length; i++) {
submenues[i].style.display = "block";
}
click = 2;
return;
}
if (click == 2) {
for (i; i < submenues.length; i++) {
submenues[i].style.display = "none";
}
click = 1;
return;
}
}
Though when i onclick=submenuvisible() it works only 1 time. What am I doing wrong?
Your mistake is in your for loops.
Where you have: for (i; i < submenues.length; i++) {
You need to reset the variable i to 0 at the beginning of the for loops.
for (i = 0; i < submenues.length; i++) {
If you don't reset it, then i will remain at the same value it was after the first time you run your function. You could improve your code further by not making i a global variable, but overall, I hope this explains your issue.

Is only able to use the last element of the antZipCodes array when using the pestDisplay function

I wrote some JS that involves targeting the DOM, specifically a text input form. It only changes the display for the last element of the array when the user types in 95827. If the user types in 95828 or 95604, the display isn't filtered properly.
Here's a link to the full code.
I was told it may have to do with the removeDisplay function and how it's iterating through display (divs), but still can't manage to fix it.
Still new to DOM Manipulation.
var display = document.querySelectorAll(".display");
var zipCodeSearch = document.querySelector("#site-search");
var ants = document.querySelector("#ants");
const antZipCodes = [95828, 95604, 95827];
zipCodeSearch.addEventListener('change', function(e) {
// for(var i = 0; i < antZipCode.length; i++) {
// if(antZipCode[i] === Number(e.target.value)) {
// removeDisplay(displayNone);
// addDisplay(ants);
// }
// }
pestDisplay(antZipCodes, ants, display, e);
});
function removeDisplay(items) {
for(var i = 0; i < items.length; i++) {
items[i].style.display = "none";
}
}
function addDisplay(item) {
item.style.display = "block";
}
function displayAll(items) {
for(var i = 0; i < items.length; i++) {
items[i].style.display = "block";
}
}
function pestDisplay(arr, id, display, e) {
for(var i = 0; i < arr.length; i++) {
if(arr[i] === Number(e.target.value)) {
removeDisplay(display);
addDisplay(id);
} else {
displayAll(display);
}
}
}

How to ignore an event in javascript?

So, I'm new to javascript.
My code is the following, it is based on a xaml file with a canvas and a couple of borders in it:
var defaultPage = null;
var aantalKliks;
var correcteBorders;
var incorrecteBorders;
var geenAntwBorders;
function onLoaded() {
defaultPage = document.getElementById('DefaultPage');
alert('In onloaded van Default.xaml.');
aantalKliks = 0;
aantalBorderKliks = 0;
correcteBorders = new Array();
for (var i = 0; i < 3; i++) {
correcteBorders[i] = defaultPage.content.findName('CorrecteBorder' + i);
}
incorrecteBorders = new Array();
for (var i = 0; i < 3; i++) {
incorrecteBorders[i] = defaultPage.content.findName('IncorrecteBorder' + i);
}
geenAntwBorders = new Array();
for (var i = 0; i < 3; i++) {
geenAntwBorders[i] = defaultPage.content.findName('GeenAntwBorder' + i);
}
}
function OnCanvasClicked() {
if (aantalKliks == 2) {
aantalKliks = 0;
}
if (aantalKliks == 0) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Visible';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Visible';
}
} else if (aantalKliks == 1) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
aantalKliks++;
}
function borderClicked(sender) {
for (var i = 0; i < correcteBorders.length; i++) {
correcteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < incorrecteBorders.length; i++) {
incorrecteBorders[i].Visibility = 'Collapsed';
}
for (var i = 0; i < geenAntwBorders.length; i++) {
geenAntwBorders[i].Visibility = 'Collapsed';
}
sender['Visibility'] = 'Visible';
}
The function OnCanvasClicked is triggered when I click anywhere in the canvas and makes all borders disappear/reappear. The function borderClicked is triggered when I click a specific border. The function borderClicked does trigger when I click a specific border, however the OnCanvasClicked function also gets executed right after, which causes an unwanted result.I think I need some way to ignore the OnCanvasClicked function if I click on a border, I did google this but to be honest I didn't really understand what they meant in most of the solutions, so I was hoping someone could explain it to me in a simple way what I need to do (and what I'm doing).
You need to set event.stopPropagation() when borderClicked function is fire
Try this which will prevent Javascript to further execution
event.preventDefault()
#Harshit is correct
You need to set event.stopPropagation() when borderClicked function is fire
I just wanted to add this link/sample which I found very usefull to understand bubbling
http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/ie9_event_phases.htm

Categories