在模板文字中設置HTML按鈕`onclick`

我有一個html模板，我正在使用模板文字。功能看起來像下面在模板文字中設置HTML按鈕`onclick`

// postCreator.js 
export const blogPostMaker = ({ title, content, address, id }, deletePost) => { 
    const innerHtml = ` 
    <blog-post> 
    <h1 class='title'>${title}</h1> 
    <p class='content'>${content}</p> 
    <p class='address'>${address}</p> 
    <button onclick='${() => deletePost(id)}'>Delete</button> 
    </blog-post> 
    ` 
    return innerHtml 
} 


//Blog.js 
    postHelper.getSeriesOfPosts(10) 
    .then(resp => { 
    resp.forEach(post => (blogDiv.innerHTML += blogPostMaker(post, postHelper.deletePost))) 
    })

我無法弄清楚是如何讓onclick工作。我試過在Blog.js中傳遞一個匿名函數到以及沒有運氣。

任何想法？

來源

2017-04-08 Elliott McNary

你試過'<按鈕的onclick = 「postHelper.deletePost（$ {ID}）」>刪除'？ – Supersharp

如果我在全局暴露'postHelper'對象，那會起作用，但我不認爲我想這樣做。我不認爲我想要做什麼是可能的，除非我基於閱讀HTML處理內聯JS的方式來暴露全局變量。 –

如果你不想全局揭露事件回調，你應該addEventListener()將其固定在代碼的JS部分：

// postCreator.js 
export const blogPostMaker = ({ title, content, address, id }) => 
    ` 
    <blog-post id='${id}'> 
    <h1 class='title'>${title}</h1> 
    <p class='content'>${content}</p> 
    <p class='address'>${address}</p> 
    <button>Delete</button> 
    </blog-post> 
    ` 

//Blog.js 
    postHelper.getSeriesOfPosts(10).then(resp => { 
    resp.forEach(post => { 
     blogDiv.innerHTML += blogPostMaker(post) 
     blogDiv.querySelector(`blog-post[id="${post.id}"] > button`) 
     .addEventListener('click',() => postHelper.deletePost(post.id)) 
    })

注：這不是做最有效的方法它但它保持你的文件結構。

相反，我將與createElement()直接創建<button>然後將其與appendChild()添加到DOM，或者我會用的DocumentFragment或<tempalte>爲了避免querySelector()上的所有blogDiv。

如果您絕對要使用內聯JS而不暴露助手，則需要將組件定義爲一個組件（例如自定義元素）。

來源

2017-04-14 07:30:13 Supersharp

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

 
document.body.innerHTML = markUp; 
 

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

來源

2017-09-17 12:37:35

如果你解釋一下你的代碼會更好。 –

在模板文字中設置HTML按鈕`onclick`

回答

相關問題