在html中第二次調用javascript函數

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在運行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/

這將讓你的代碼工作，你怎麼想。如果你不這樣做，你的代碼就不能工作，因爲當你在html文檔中將.js文件作爲腳本而不是函數調用時，添加到attack（）函數的兩行將被執行。這意味着getElementById（「defend」）方法將不會找到任何內容，因爲當您初始化頁面時，找不到具有此id的任何元素，您在單擊鏈接時創建它。

但請注意，如果您不止一次點擊攻擊，您的代碼將中斷，因爲會有多個防守元素。

Answer 2

當創建動態內容，從來沒有使用IDS的處理程序！使用類代替

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

如果你不這樣做此代碼不能工作，因爲這兩條線會當你打電話給你的HTML文檔中的.js文件作爲一個腳本，不執行作爲一項功能。這意味着getElementById（「defend」）方法將不會找到任何內容，因爲當您初始化頁面時，找不到具有此id的任何元素，您在單擊該鏈接時創建它。 我希望這有助於！ 乾杯！