如何在JavaScript中并不总是可见的警报中包含带有onclick的链接？

Question

I have an alert that shows under some conditions. I want the alert to contain a link and execute some code when that link is clicked. However, I'm getting error "ReferenceError: doTheThing is not defined".

function doTheThing() {
    document.getElementById("thing").innerHTML = "Done.";
    };

var alert = '<div class="alert alert-warning alert-dismissible fade show"
role="alert"><button type="button" class="close" data-dismiss="alert" 
aria-label="Close"><span aria-hidden="true">&times;</span></button>Please
submit your wallet address or <span class="btn-link"
id=btn-donate onclick="doTheThing()">click here to donate your winnings.</span></div>';

var alertHTML = $(alert);

document.getElementById("placeholder").innerHTML = alert;

and html;

<div id=placeholder></div>
<div id=thing></div>

Answer 1

I assume: you defined the function in the dom ready context. If so, move the function outside.

 function doTheThing() { document.getElementById("thing").innerHTML = "Done."; }; $(function () { var alert = '<div class="alert alert-warning alert-dismissible fade show"\\ role="alert"><button type="button" class="close" data-dismiss="alert"\\ aria-label="Close"><span aria-hidden="true">&times;</span></button>Please\\ submit your wallet address or <span class="btn-link"\\ id=btn-donate onclick="doTheThing()">click here to donate your winnings.</span></div>'; var alertHTML = $(alert); document.getElementById("placeholder").innerHTML = alert; }); 

 .row { background: #f8f9fa; margin-top: 20px; } .col { border: solid 1px #6c757d; padding: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" > <div id=placeholder></div> <div id=thing></div> 

Answer 2

In your provided example change following settings:

As Renan Souza sad, it has to be included inside its own file.

Answer 3

This code works fine:

 function doTheThing() { document.getElementById("thing").innerHTML = "Done."; }; var alert = `<div class="alert alert-warning alert-dismissible fade show" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>Please submit your wallet address or <span class="btn-link" id=btn-donate onclick="doTheThing()">click here to donate your winnings.</span></div>`; var alertHTML = $(alert); document.getElementById("placeholder").innerHTML = alert; 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id='placeholder'> </div> <div id='thing'> </div>