有關HTM與Javascript之間互傳值問題
問題假設：
做一個delete的功能在網頁中，需要刪除一筆資料，並需要製作提醒確認
範例如下：
index.hbs
<form action="./restaurants/{{this._id}}/delete" method="POST" style="display:inline ;">
<button type="submit" class="btn btn-outline-secondary align-top" id="delete-btn" name="delete-btn" onclick="check(`{{this.name}}`)">
</button>
</form>
main.hbs
<script>
function check(name) {
if (confirm(`你確定要刪除${name}嗎`)) {
document.getElementById('delete-btn').value = 'true'
console.log(document.getElementById('delete-btn').value)
} else {
document.getElementById('delete-btn').value = 'false'
event.preventDefault()
}
}
</script>
app.js
app.post("/restaurants/:id/delete", (req, res) => {
const restaurantId = req.params.id;
console.log(req.body)
return Restaurant.findById(restaurantId)
.then((restaurantData) => restaurantData.remove())
.then(() => res.redirect("/"));
});
此時HTML使用onclick event來進行呼叫<script>的function執行if statement，並設立confirm()來進行確認。若是確認，則將value掛入<button>。這時<form>便會開始透過action來將value導入req.body中
可以知道<script>用DOM的操作手法將value套入到HTML tag中，而HTML的需求則是透過event來將value導入<script>中。而中間的過程可以利用console.log來確認值是否傳入。
但是有個問題要注意的是，<form>的預設行為是在type=“submit”被點擊後，去執行action的部分。因此即便是onclick的後面語法錯誤，<form>會不理會此錯誤，繼續執行」app.js的動作。就算confirm()點選cancel，還是會繼續執行action。因此要多設立一個event.preventDefault()來停止<form>的預設行為，避免再繼續執行刪除的動作。
Ref: