未在HTMLDivElement.onclick上定義

Question

剛開始時，我已經在這里尋找類似的問題，但是這些問題都沒有使我朝着正確的方向發展。 無論如何，我遇到一個問題，當我在登錄名上單擊一個對象時，它沒有發送我在下面提供的代碼的selectPlayer函數。

function RenderFullAvatarCards(LoginData) 
{
      var avatarNumber = 0;
      $("#externalSystem").html('<center><div id="avatarCards" class="clickCard" style="margin-top:30px;"></div><br><div class="shadow"></div><div class="login-different" id="changePenguin">Change Penguin</div></center>');
    for (var i in LoginData['Accounts']) {
        $("#avatarCards").append('<div id="avatarCard_' + avatarNumber + '"  onclick="selectPlayer(' + i + ', ' + avatarNumber + ');" class="playerSelect"><div id="penguin" style="background:url(//localhost/play/assets/img/doll.png) no-repeat;position:relative;top:66px;width:144px;height:250px;"></div><span id="penguinName">' + LoginData['Accounts'][i][0] + '</span></div>');
        avatarNumber++;
    };
    $("#changePenguin").on('click', function() {
        renderNewPlayer(true);
    });
}

我收到的實際錯誤是這樣的

(index):1 Uncaught ReferenceError: Reed is not defined
    at HTMLDivElement.onclick ((index):1)

指的是我的索引的開頭

<!DOCTYPE html>

任何想法可能是什么問題？

Answer 1

如果我不得不猜測（之所以這樣做，是因為您沒有提供足夠的信息）， LoginData對象看起來就像

{
  Accounts: {
    Reed: ['Happy Feet']
  }
}

這里的問題是，因為i將是“ Reed”值，所以您的內聯onclick屬性看起來像

onclick="selectPlayer(Reed, 0)"

由於未引用Reed ，因此JavaScript正在尋找該名稱的變量，因此...

未捕獲的ReferenceError：未定義Reed

快速又骯臟的解決方案...添加引號

onclick="selectPlayer(\'' + i + '\', ' + avatarNumber + ')

更好的解決方案是向您的元素添加一些數據/屬性，並使用委托的事件偵聽器來處理單擊。 例如

$(document).on('click', '.playerSelect', function() {
  let player = $(this)
  selectPlayer(player.data('account'), player.data('avatar-number'))
})

並在您的RenderFullAvatarCards函數中...

var avatarCards = Object.keys(LoginData.Accounts).map((account, avatarNumber) => {
  return $('<div></div>')
    .attr('id', 'avatarCard_' + avatarNumber)
    .data('account', account)
    .data('avatar-number', avatarNumber)
    .addClass('playerSelect')
    .append(...) // add span elements, etc
})
$("#avatarCards").append(avatarCards)

未在HTMLDivElement.onclick上定義

問題描述

1 個解決方案

解決方案1
2 已采納 2017-11-10 03:02:04

未在HTMLDivElement.onclick上定義

問題描述

1 個解決方案

解決方案1 2 已采納 2017-11-10 03:02:04

解決方案1
2 已采納 2017-11-10 03:02:04