テンプレートリテラルでonclickイベントを渡す

URLをonclickイベントで渡そうとしていますが、動作していません。 <body onload="displayBookmarks()">は、すぐにページがテンプレートリテラルでonclickイベントを渡す

をロードされるようdisplayBookmarks機能を初期化することがあり

function deleteBookmark(url){ 
    alert(url); 
}; 

function displayBookmarks(){ 
    bookmarksResults.innerHTML = ""; 
    for (let a in bookmarks){ 
     let name = bookmarks[a].name; 
     let url = bookmarks[a].url; 
     bookmarksResults.innerHTML += `<div class="well"> <h3> ${name} <a class="btn btn-default" target="_blank" href=${url} >Visit</a> <a onclick=${deleteBookmark(url)} class="btn btn-danger" >Delete</a></h3></div>` 
    } 
}

主な問題は、それがURLの表示を開始ページが読み込まれるとすぐにonclick=${deleteBookmark(url)} ですが、私は、いつ削除のみ表示されるようにしたいですボタンを押す。

出典

2017-07-16 sskumar

シンプル：（https://stackoverflow.com/q/6941483/1048572）HTML文字列と[インラインのイベントハンドラ]を使用しないでください。テンプレートリテラルはあなたの本当の問題ではありません。 – Bergi

なぜイベントハンドラー属性の値に補間を使用していますか？実際には、文字列を構築するときに関数を呼びたくはありません。あなたはリテラル 'onclick =" deleteBookmark（url） "'をHTMLに表示します。 – Bergi

'$ {deleteBookmark（url）} ...'は、テンプレートリテラルが定義されると直ちに評価されます。 'deleteBookmark（url）'は関数呼び出し式なので、これが問題の原因です。バッククォート内の '$ {...} 'はJavaScriptコードを評価します_。 –

const markUp = ` 
 
    <button onclick="myFunction()">Click me</button> 
 
`; 
 

 
document.body.innerHTML = markUp; 
 

 
window.myFunction =() => { 
 
    console.log('Button clicked'); 
 
};

出典

2017-09-17 12:58:48

テンプレートリテラルでonclickイベントを渡す

答えて

関連する問題