動的なhtmlタグを書く方法

Question

私はこのfor-inループを持っています。これは、タグを持つdiv要素を返すことになっています。このタグにはonclick関数があります。何らかの理由で私はこのエラーが発生します - Uncaught SyntaxError：missing）引数リストの後ろ - 私はそれを見逃してしまいました。どんな助けやアドバイスも大歓迎です。ありがとうございました。

for (var key in icons) { 

var legend = document.getElementById('legend'); 
//the variables below points to objects 
var type = icons[key]; 
var name_place = type.name; 
var icon = type.icon; 
var div = document.createElement('div'); 
div.innerHTML = '<img' + ' src="' + icon + '"' +  
'onclick="displayMarker(' + name_place + ')"' + '> ' + name_place; 
    legend.appendChild(div); 
} 

//When I try: 
div.innerHTML = '<img' + ' src="' + icon + '"' + 
'onclick="displayMarker(name_place)"> ' + name_place; 

変数name_place

は機能あなたは関数パラメータのためのパラメータに引用符を追加配置する必要があり

Answer 1

var icons = { 
 
    one: { 
 
    name: 'name1', 
 
    icon: 'icon1.img' 
 
    }, 
 
    two: { 
 
    name: 'name2', 
 
    icon: 'icon2.img' 
 
    } 
 
}; 
 

 
function displayMarker(arg) { 
 
    console.log("displayMarker argument %s value: %s", typeof arg, arg); 
 
} 
 

 
for (var key in icons) { 
 

 
    var legend = document.getElementById('legend'); 
 
    //the variables below points to objects 
 
    var type = icons[key]; 
 
    var name_place = type.name; 
 
    var icon = type.icon; 
 
    var div = document.createElement('div'); 
 
    div.innerHTML = '<img src="' + icon + '" onclick="displayMarker(\'' + name_place + '\')"> ' + name_place; 
 
    legend.appendChild(div); 
 
}

<div id="legend"></div>

に渡されていません。

すでに文字列表現に一重引用符を使用しているため、パラメータを渡すためには\'の文字をエスケープする必要があります。

提案：可能であればevent delegationを使用してください。