Как автозапустить событие onclick

Question

жаль, что я все еще изучаю JavaScript, читаю Javascript W3Cschools и Jquery, но их много не учат.

Я изучаю анимацию на данный момент, как я могу автоматически запускать это, а затем ждать, пока кто-то щелкнет (прослушиватель событий), я попытался превратить его в функцию, но я должен делать это неправильно, также еще 1 что означает (Idx), я понимаю (id) - это элемент HTML Html, но не уверен Idx, который нелегко найти в google. для чтения, прослушиватель событий начинается с 5-й строки снизу, а карты тасования - 6-я строка сверху (не уверен, что это помогает), исходный код находится здесь http://www.the-art-of-web.com/javascript/css-animation/ благодарит за любую помощь. С уважением. Уильям.

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); 

Answer 1

Я прошел через свой код и добавил комментарии, чтобы попытаться помочь объяснить, что происходит в этом файле:

//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) 

как я автоматически начинаю это, а затем ждать, пока кто-то нажимать

Способ, которым я бы это сделал, - добавить событие щелчка вручную после цикла for, который нацелен на первую карту с обработчиком событий. Поскольку на карточках нет идентификатора, я бы попытался использовать массив, к которому добавлены карточки. Если предположить, что массив карт был пуст, когда мы начали:

cards[0].click(); 

Если это не сработает, я хотел бы попробовать нацеливание элемент в DOM. Мы знаем, что каждая карта добавляется в конец Div #. Итак, если мы можем настроить таргетинг на первый div внутри войлока, мы должны иметь возможность запускать событие click на нем.

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

что делает (IDX) означают

Я надеюсь, что комментарии помогают объяснить это. Похоже, что переменная idx используется как расширенная ссылка i. Внутри цикла for создатель создает функцию, которая принимает один параметр (idx). Цикл for имеет переменную (i), которая увеличивается на единицу для каждого экземпляра цикла. Каждый раз, когда цикл происходит, i передается в функцию idx.

Я надеюсь, что это поможет вам понять, как работает этот код.