javascript：onclick 功能不适用于电子邮件

Question

i have a javascript and inside the ajax of datatables, i have this part of code

{   "data": null, 
    "width": "10%",
    "render": function(data){
        icon2 = '<center><button type="button" class="btn btn-info m-btn m-btn--icon m-btn--icon-only btn-sm" ' +
            'data-toggle="m-tooltip" title="" onclick="sendEmail('+data.email+')" data-placement="top" data-original-title="' + 'Send Email' + ' "> <i class="la la-envelope"></i></button>';
        icon2 += '</center>';

    return icon2; }
}

and a function

function sendEmail(email){
   console.log("email: ", email);
}

but when i click the button, there is an error says **Uncaught SyntaxError: missing ) after argument list **.

is there any other solution for this?

Answer 1

It looks like the error is in the "render": function(data){ portion. That function is closed but the enclosing hash is not.

{   "data": null, 
    "width": "10%",
    "render": function(data){
        icon2 = '<center><button type="button" class="btn btn-info m-btn m-btn--icon m-btn--icon-only btn-sm" ' +
            'data-toggle="m-tooltip" title="" onclick="sendEmail('+data.email+')" data-placement="top" data-original-title="' + 'Send Email' + ' "> <i class="la la-envelope"></i></button>';
        icon2 += '</center>';

    return icon2; }
}

Note the extra } at the end.

Answer 2

Since literals have to be quoted .

You can't just write:

onclick="sendEmail(bob@example.com)"

This quick and dirty approach is just to add a couple of ' to the data, but that makes the assumption that there won't be anything else problematic about the data (such as it including ' , " , or new lines).

You should:

1. Encode the data as JSON so it is a valid JavaScript literal
2. Encode special characters in HTML so they don't cause HTML parsing problems

eg

const email = data.email;
const js_safe_email = JSON.stringify(email);
const html_safe_email = js_safe_email
     .replace(/&/g, "&")
     .replace(/</g, "&lt;")
     .replace(/>/g, "&gt;")
     .replace(/"/g, "&quot;")
     .replace(/'/g, "&#039;");
icon2 = '<center><button type="button" class="btn btn-info m-btn m-btn--icon m-btn--icon-only btn-sm" ' +
        'data-toggle="m-tooltip" title="" onclick="sendEmail('+html_safe_email+')" data-placement="top" data-original-title="' + 'Send Email' + ' "> <i class="la la-envelope"></i></button>';

This is rather horrible, but so is mashing together strings of data embedded in JS embedded in HTML. It's generally better to use DOM methods instead.