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

创建动态内容时，切勿将id用于处理程序！而是使用类

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

此外，为确保对可能尚不存在的元素进行正确处理，请利用jquery的功能

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

Answer 2

当您点击攻击时，该元素存在。但是，当您运行#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/

这将使您的代码按照您的意愿运行。如果您不这样做，您的代码将无法工作，因为当您将html文档中的.js文件作为脚本而不是函数调用时，将执行添加到attack（）函数中的两行。这意味着方法getElementById（“defend”）将找不到任何内容，因为当您初始化页面时，您找不到具有此id的任何元素，您在单击链接时创建它。

但请注意，如果您多次点击攻击，您的代码将会中断，因为会有多个防御元素。

Answer 3

很简单，只需输入两行代码

即可

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

在attack（）函数内部，最后，它的工作原理。这是新的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;}

如果您不这样做，则此代码无法运行，因为当您将html文档中的.js文件作为脚本而不是函数调用时，将执行这两行。这意味着方法getElementById（＆＃34; defend＆＃34;）将找不到任何内容，因为当您初始化页面时，您找不到具有此id的任何元素，您在单击链接时创建它。我希望这个对你有用！干杯！

Answer 4

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

第二次在html中调用javascript函数

4 个答案: