Вызов функции javascript в html во второй раз

Question

Ниже приведен мой код для простой текстовой игры, которую я пытаюсь сделать, но я не могу понять, почему в первый раз я вызываю свою функцию с помощью гиперссылки link1, она работает, но когда я добавьте еще одну ссылку в мой html-документ с помощью javascript и попробуйте вызвать другую функцию onclick по этой ссылке, она не работает. может кто-нибудь объяснить?

var getupvar = document.getElementById("attack"); 
 

 
getupvar.onclick = attack; 
 

 
function attack() { 
 
    $('<p> Some text </p>').insertBefore("#placeHolder"); 
 

 
    $('<a href="#" id="defend">link2</a>').insertBefore("#placeHolder"); 
 
} 
 

 
var link2event = document.getElementById("defend"); 
 

 
link2event.onclick = defend; 
 

 
function defend() { 
 
    alert("working now"); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<div id="console"> 
 
    <p id="startGameMessage"></p> 
 
    <div id="gameArea"> 
 
    <p id="gameMessage">Some Text</p> 
 
    <a href="#" id="attack">link1</a> 
 

 
    <div id="placeHolder"></div> 
 
    </div> 
 
</div>

Answer 1

Когда вы связываете вашу атаку OnClick, элемент существует. Но поскольку #defend не существует на dom при запуске var link2event = document.getElementById("defend");, ваш onclick никогда не будет установлен.

Вместо этого попробуйте:

var getupvar = document.getElementById("attack"); 
getupvar.onclick = attack; 

function attack(){ 
    $('<p> Some text </p>').insertBefore("#placeHolder"); 
    $('<a href="#" id="defend">link2</a>').insertBefore("#placeHolder"); 
    var link2event = document.getElementById("defend"); 
    link2event.onclick= defend; 
} 

function defend(){ 
    alert("working now"); 
} 

jsfiddle https://jsfiddle.net/fv9mpbm6/

Это позволит получить ваш код работает, как вы хотите. Если вы этого не сделаете, ваш код не сможет работать, потому что две строки, добавленные к функции attack(), будут выполняться, когда вы вызываете .js-файл в свой html-документ как скрипт, а не как функцию. Это означает, что метод getElementById («защита») ничего не найдет, потому что когда вы инициализируете страницу, вы не можете найти какой-либо элемент с этим идентификатором, вы создаете его, когда вы нажимаете на ссылку.

Но обратите внимание, что если вы нажмете атаку более одного раза, ваш код сломается, потому что будет более одного элемента защиты.

Answer 2

При создании динамического контента, никогда не использовать идентификаторы для обработчиков! Используйте классы вместо

function attack() { 
    $('<a href="#" class="defend">link2</a>').insertBefore("#placeHolder"); 
} 

Кроме того, чтобы обеспечить надлежащую обработку для элементов, которые не могут еще существовать, рычаги JQuery по функциональности

$('body').on('click', '.defend', function() { 
    alert("working now") 
}) 

Answer 3

Try this, I am not sure is this what you expect 


var getupvar = document.getElementById("attack"), i=0; 

getupvar.onclick = attack; 

function attack() { 
    $('<p> Some text </p>').insertBefore("#placeHolder"); 

    $('<a href="#" id="defend'+i+'">link2</a>').insertBefore("#placeHolder"); 
    var link2event = document.getElementById("defend"+i); 

    link2event.onclick = defend; 
    i++; 
} 

function defend() { 
    alert("working now"); 
} 

Answer 4

это просто, просто положить две строки кода

var link2event = document.getElementById("defend"); 
link2event.onclick= defend; 

внутри функции атаки(), в конце концов, и она работает. Это функция новая атака():

function attack(){ 
$('<p> Some text </p>').insertBefore("#placeHolder"); 
$('<a href="#" id="defend">link2</a>').insertBefore("#placeHolder"); 
var link2event = document.getElementById("defend"); 
link2event.onclick= defend;} 

Если вы не сделаете так что этот код не работает, потому что эти две линии будут выполняться при вызове .js файл в вашем HTML документе в качестве сценария, а не как функция. Это означает, что метод getElementById («защищать») ничего не найдет, потому что когда вы инициализируете страницу, вы не можете найти какой-либо элемент с этим идентификатором, вы создаете его, когда вы нажимаете на ссылку. Надеюсь, это поможет! Приветствия!