Expected behavior

Hi, I need help with js code snippet Modal cookie Gdpr consent to convert it from Jquery to vanilla js so that I don't need to add complete jquery library to the project.

Actual behavior This converted vanilla js has some errors and is not working properly

Original Jquery code snippet:

$(document).ready(function(){if(document.cookie.indexOf("gdpr_mandatory=")==-1){$('#gdpr_basic').modal({backdrop:false});}});$('#gdpr_btn_full_agree').click(function(e){e.preventDefault();var date=new Date();date=new Date(date.getTime()+1000*60*60*24*365);document.cookie="gdpr_mandatory=1; expires="+date.toGMTString()+"; path=/";document.cookie="gdpr_functional=1; expires="+date.toGMTString()+"; path=/";document.cookie="gdpr_ga=1; expires="+date.toGMTString()+"; path=/";document.cookie="gdpr_fbp=1; expires="+date.toGMTString()+"; path=/";$('#gdpr_basic').modal('hide');});$('#gdpr_btn_adjust').click(function(e){e.preventDefault();$('#gdpr_basic').modal('hide');$('#gdpr_adjust').modal();});$('#gdpr_btn_save').click(function(e){e.preventDefault();$('#gdpr_adjust_form').submit();});$('#gdpr_adjust_form').on('submit',function(e){e.preventDefault();$(this).find('input[type="checkbox"]').each(function(e){var fieldName=$(this).attr('name');var fieldValue=$(this).is(':checked')?1:0;var date=new Date();date=new Date(date.getTime()+1000*60*60*24*365);document.cookie=fieldName+"="+fieldValue+"; expires="+date.toGMTString()+"; path=/;";})toastr["info"]("Saved");$('#gdpr_adjust').modal('hide');});

Converted code snippet into vanilla js:

document.querySelector(document).ready(function () { if (document.cookie.indexOf("gdpr_mandatory=") == -1) { document.querySelector('#gdpr_basic').modal({ backdrop: false }); } }); document.querySelector('#gdpr_btn_full_agree').click(function (e) { e.preventDefault(); var date = new Date(); date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365); document.cookie = "gdpr_mandatory=1; expires=" + date.toGMTString() + "; path=/"; document.cookie = "gdpr_functional=1; expires=" + date.toGMTString() + "; path=/"; document.cookie = "gdpr_ga=1; expires=" + date.toGMTString() + "; path=/"; document.cookie = "gdpr_fbp=1; expires=" + date.toGMTString() + "; path=/"; document.querySelector('#gdpr_basic').modal('hide'); }); document.querySelector('#gdpr_btn_adjust').click(function (e) { e.preventDefault(); document.querySelector('#gdpr_basic').modal('hide'); document.querySelector('#gdpr_adjust').modal(); }); document.querySelector('#gdpr_btn_save').click(function (e) { e.preventDefault(); document.querySelector('#gdpr_adjust_form').submit(); }); document.querySelector('#gdpr_adjust_form').addEventListener('submit', function (e) { e.preventDefault(); document.querySelector(this).querySelector('input[type="checkbox"]').each(function (e) { var fieldName = document.querySelector(this).attr('name'); var fieldValue = document.querySelector(this).is(':checked') ? 1 : 0; var date = new Date(); date = new Date(date.getTime() + 1000 * 60 * 60 * 24 * 365); document.cookie = fieldName + "=" + fieldValue + "; expires=" + date.toGMTString() + "; path=/;"; }) toastr["info"]("Saved"); document.querySelector('#gdpr_adjust').modal('hide'); });

Resources (screenshots, code snippets etc.)

Here is the link to the code snippet with complete Gdpr cookie consent modal and all htlm, css and js files including converted vanilla js code with errors: https://mdbootstrap.com/snippets/standard/demzl25/3958434#js-tab-view

Thanks,

Damjan