Question

我是JavaScript的新手，所以这可能是基本的......

我正在尝试动态创建一个图像，并为“onclick”添加一个事件监听器。我将此img添加到div。

我像这样创建img：

function createNewSmiley()
{
    var newSmiley = document.createElement("img");
    newSmiley.src = "./smiley.jpg";
    newSmiley.alt = "Smiley Image";
    newSmiley.style.width = "64px";
    newSmiley.style.height = "64px";
    return newSmiley;
}

然后我将它添加到div中就像使用这样：

function positionNewSmiley(parent, smiley, x, y)
{
    var newSmiley = createNewSmiley();
    newSmiley.style.top = y + "px";
    newSmiley.style.left = x + "px";
    parent.appendChild(newSmiley);
}

这是我的主要功能：

function main(smileyCount)
{
    var myDiv = document.getElementById("myDiv");
    for (var i = 0; i < smileyCount;i++)
    {
        var x = Math.floor((Math.random() * 500));
        var y = Math.floor((Math.random() * 500));
        var smiley = createNewSmiley();
        smiley.onclick = smileyClicked;
        positionNewSmiley(myDiv, smiley, x, y);
    }
}

function smileyClicked(ev) {
    alert("OK");
}

但onclick事件不会触发！

但是，如果我将事件监听器添加到div中 - 它将会。

我做错了什么？

Answer 1

如果你在创建功能中添加点击它将起作用

    function createNewSmiley()
{
    var newSmiley = document.createElement("img");
    newSmiley.src = "./smiley.jpg";
    newSmiley.alt = "Smiley Image";
    newSmiley.style.width = "64px";
    newSmiley.style.height = "64px";
    newSmiley.addEventListener("click", smileyClicked);
    return newSmiley;
}

Answer 2

正如上面的评论所述，当您要定位传递的smiley时，您会在positionNewSmiley中创建新的smiley：

var smiley = createNewSmiley();
smiley.onclick = smileyClicked;

positionNewSmiley(myDiv, smiley, x, y);
_________________________^^^^^^

只需在位置功能中使用它：

function positionNewSmiley(parent, smiley, x, y)
{
    smiley.style.top = y + "px";
    smiley.style.left = x + "px";

    parent.appendChild(smiley);
}

希望这有帮助。

function createNewSmiley()
{
  var newSmiley = document.createElement("img");
  newSmiley.src = "http://cfile24.uf.tistory.com/image/163BB51F4BF9DF7431AB10";
  newSmiley.alt = "Smiley Image";
  newSmiley.style.width = "64px";
  newSmiley.style.height = "64px";

  return newSmiley;
}


function positionNewSmiley(parent, smiley, x, y)
{
  smiley.style.top = y + "px";
  smiley.style.left = x + "px";

  parent.appendChild(smiley);
}

function main(smileyCount)
{
  var myDiv = document.getElementById("myDiv");

  for (var i = 0; i < smileyCount;i++)
  {
    var x = Math.floor((Math.random() * 500));
    var y = Math.floor((Math.random() * 500));
    var smiley = createNewSmiley();
    smiley.onclick = smileyClicked;
    positionNewSmiley(myDiv, smiley, x, y);
  }
}

function smileyClicked(ev) {
  alert("OK");
}

main(6);

<div id='myDiv'></div>

附加到img时，未在javascript中触发OnClick事件

2 个答案: