[英]Pass object to function in javascript via html button
我正在嘗試使用 html 中<button value=object>
的value
字段將對象(fullcalendar 的事件)傳遞給函數,因此當單擊按鈕時,它會傳遞對象。 盡管當我打印執行alert(obj)
的對象時,它給了我[object
while doing alert(typeof obj)
給了我string
。 另外,如果我嘗試使用 delete 函數,它告訴我它不是一個函數,在我看來對象沒有被傳遞,所以我做錯了什么還是我試圖實現一些不可能的事情?
// this is js code function test(button) { if (confirm("Are you sure you want to remove it?")) { let event = button.getAttribute('value'); alert(typeof event); alert(event); event.remove(); } }; $(document).ready(function() { calendarEl = document.getElementById('calendar'); var calendar = new FullCalendar.Calendar(calendarEl, { locale: 'it', headerToolbar: { right: 'today prev next', center: 'title', left: '', }, initialView: 'listDay', views: { listDay: { type: 'listWeek', dayCount: 1 } }, events: [{ id: '1', title: "Default title", start: "2022-06-17 19:00", }, { id: '2', start: "2022-06-17 09:00", title: "Event 2" }, ], eventContent: function(args) { id = args.event.id; let event = calendar.getEventById(id); const text = args.event._def.title + '<button style="float:right" onclick="test(this)" value=' + event + '> delete </button>'; return { html: text }; }, }); calendar.render(); });
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <script src="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <div id="calendar"></div> </body> </html>
在我看來,您應該傳遞 id 而不是對象,對 DOM 元素進行刪除沒有多大意義。
刷新過濾該 id 的日歷上的事件。
var calendar = null;
function test(id) {
if (confirm("Are you sure you want to remove it?")) {
alert(id);
if(calendar!=null){
var eventToRemove = calendar.getEventById(id);
eventToRemove.remove();
}
}
}
document.addEventListener("DOMContentLoaded", function () {
var calendarEl = document.getElementById("calendar");
calendar = new FullCalendar.Calendar(calendarEl, {
locale: "it",
headerToolbar: {
right: "today prev next",
center: "title",
left: ""
},
initialView: "listDay",
views: {
listDay: {
type: "listWeek",
dayCount: 1
}
},
headerToolbar: {
left: "prev,next today",
center: "title"
},
events: [
{ id: "1", title: "Default title", start: "2022-06-17 19:00" },
{
id: "2",
start: "2022-06-17 09:00",
title: "Event 2"
}
],
eventContent: function (args) {
id = args.event.id;
let event = calendar.getEventById(id);
// pass the Id instead of the object
const text =
args.event._def.title +
'<button style="float:right" onclick="test('+event.id+')">delete</button>';
return {
html: text
};
}
});
calendar.render();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.