Как включить ссылку с onclick в предупреждение, которое не всегда отображается в JavaScript? - PullRequest
Новая
       41

Как включить ссылку с onclick в предупреждение, которое не всегда отображается в JavaScript?

0 голосов
/ 21 июня 2019

У меня есть предупреждение, которое отображается при некоторых условиях.Я хочу, чтобы оповещение содержало ссылку и выполняло некоторый код при нажатии на эту ссылку.Тем не менее я получаю сообщение об ошибке «ReferenceError: doTheThing не определено». 

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;

и html; 

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

Ответы [ 3 ]

0 голосов
/ 21 июня 2019

Я предполагаю: вы определили функцию в контексте dom ready.Если это так, переместите функцию наружу. 

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>
0 голосов
/ 21 июня 2019

В предоставленном вами примере измените следующие настройки:

enter image description here

Как и Renan Souza печально, он должен быть включен в свой собственный файл.

0 голосов
/ 21 июня 2019

Этот код отлично работает: 

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