Pass object to function in javascript via html button-CodePudding

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. Although when I print the object doing alert(obj) it gives me [object while doing alert(typeof obj) gives me 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?

if you prefer 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/[email protected]/main.min.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePudding user response：

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.

Refresh the events on the calendar filtering that 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();
    });