通过 html 按钮将对象传递给 javascript 中的函数

Question

I am trying to pass an object (an event of fullcalendar) to a function using the value field of <button value=object> in html, so when the button is clicked it passes the object.我正在尝试使用 html 中<button value=object>的value字段将对象（fullcalendar 的事件）传递给函数，因此当单击按钮时，它会传递对象。 Although when I print the object doing alert(obj) it gives me [object while doing alert(typeof obj) gives me string .尽管当我打印执行alert(obj)的对象时，它给了我[object while doing alert(typeof obj)给了我string 。 Also if I try to use the delete function it tells me it's not a function, it seems to me like the object is not being passed, so am I doing something wrong or am I trying to achieve something impossible?另外，如果我尝试使用 delete 函数，它告诉我它不是一个函数，在我看来对象没有被传递，所以我做错了什么还是我试图实现一些不可能的事情？

if you prefer codepen如果你更喜欢 codepen

 // 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>

Answer 1

In my opinion, you should be passing the id instead of the object, doing a remove over a DOM element doesn't make much sense.在我看来，您应该传递 id 而不是对象，对 DOM 元素进行删除没有多大意义。

Refresh the events on the calendar filtering that id.刷新过滤该 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();
    });

通过 html 按钮将对象传递给 javascript 中的函数

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-06-17 16:00:19

通过 html 按钮将对象传递给 javascript 中的函数

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-06-17 16:00:19

解决方案1
2 已采纳 2022-06-17 16:00:19