0

sorry am still learning JavaScript, read W3Cschools javascript and Jquery but there is a lot they don't teach.

I am studying animation at the moment, how do I auto start this rather then wait for someone to click (event listener), I've attempted turning it into a function but I must be doing it wrong, also 1 more what does (Idx) mean, I understand (id) is Html ID element but not sure Idx, not easy to find on google. to read, event listener starts at 5th line from the bottom, and the shuffle cards is 6th line from top (not sure if that helps), original code is located here http://www.the-art-of-web.com/javascript/css-animation/ thanks for any help. Regards. William. 

var cardClick = function(id)
{
  if(started) {
  showCard(id);
  } else {
  // shuffle and deal cards
  card_value.sort(function() { return Math.round(Math.random()) -    0.5; });
  for(i=0; i < 16; i++) {
    (function(idx) {
      setTimeout(function() { moveToPlace(idx); }, idx * 100);
    })(i);
  }
  started = true;
}
};

// initialise

var stage = document.getElementById(targetId);
var felt = document.createElement("div");
felt.id = "felt";
stage.appendChild(felt);

// template for card
var card = document.createElement("div");
card.innerHTML = "<img src=\"/images/cards/back.png\">";

for(var i=0; i < 16; i++) {
var newCard = card.cloneNode(true);

newCard.fromtop = 15 + 120 * Math.floor(i/4);
newCard.fromleft = 70 + 100 * (i%4);
(function(idx) {
 newCard.addEventListener("click", function() { cardClick(idx); }, false);
})(i);

felt.appendChild(newCard);
cards.push(newCard);
Will Pat
  • 9
  • 1
  • You can invoke a click event by simply implying a click .. `newcard.click();` .. have a look here too. http://stackoverflow.com/questions/6367339/trigger-a-button-click-from-a-non-button-element – Daniel Jan 28 '15 at 16:14
  • Why not do something like `onLoad=cardClick()`? – Waxi Jan 28 '15 at 16:15
  • `idx` is just the name for the variable `i`. Its being passed to the self executing function in your `for` loop – atmd Jan 28 '15 at 16:20
  • w3cschools will always let you down, read MDN. https://developer.mozilla.org/en-US/docs/Web/JavaScript – Paul J Jan 28 '15 at 16:51

1 Answers1

2

I've gone through your code and added comments to try and help explain what is going on in this file:

//Declare card click function. Takes one parameter (id)
var cardClick = function(id){
  if(started) {
    showCard(id);
  } else {
    // shuffle and deal cards
    card_value.sort(function() { 
      return Math.round(Math.random()) -    0.5; 
    });
    for(i=0; i < 16; i++) {
      (function(idx) {
        setTimeout(function() { 
          moveToPlace(idx); 
        }, idx * 100);
      })(i);
    }
    started = true;
  }
};

// initialise

//set stage as reference to some element
var stage = document.getElementById(targetId);
//append a div with ID "felt" to the stage element
var felt = document.createElement("div");
felt.id = "felt";
stage.appendChild(felt);

// template for card
//declare card variable as a div with some html content
var card = document.createElement("div");
card.innerHTML = "<img src=\"/images/cards/back.png\">";

//Loop from 0 to 16, where i = current value
for(var i=0; i < 16; i++) {
  //create a copy of the card made earlier
  var newCard = card.cloneNode(true);

  //apply some attributes to the new card
  newCard.fromtop = 15 + 120 * Math.floor(i/4);
  newCard.fromleft = 70 + 100 * (i%4);

  //Create and run an anonymous function.
  //The function takes one parameter (idx)
  //The function is called using (i) as (idx)
  (function(idx) {
    //add click handler to the card element that triggers the card click
    //function with parameter (idx)
    newCard.addEventListener("click", function() { cardClick(idx); }, false);
  })(i);

  //add new card to the stage
  felt.appendChild(newCard);
  //add new card to an array of cards
  cards.push(newCard);
} //end for loop (I added this. It should be here)

how do I auto start this rather then wait for someone to click

The way I would do it, is add a manual click event after the for loop that targets the first card that has the event handler. Because there is no ID set on the cards, I would try using the array that the cards are added to. Assuming that the cards array was empty when we started:

cards[0].click();

If that doesn't work, I would try targeting the item in the DOM. We know that each card is added to the end of div#felt. So, if we can target the first div inside felt, we should be able to trigger the click event on it.

document.getElementByID("felt").firstChild.click();

what does (Idx) mean

I'm hoping the comments help explain this. It looks like the variable idx is just used as an extended reference of i. Inside a for loop, the writer creates a function that takes one parameter (idx). The for loop has a variable (i) that increases by one for each instance of the loop. Each time the loop happens, i is passed into function as idx.

I hope that helps to get you an understanding of how this code works.

Watty
  • 358
  • 5
  • 18