Question

我是java脚本的新手。我有3个按钮。

<button type="button" class="btn btn-primary m-1" id="alert">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt">Prompt!</button>

我需要在点击它们时发出警告弹出窗口，以便第一个＆＃34;警告＆＃34;这将是你好。而对于第二个，它将确认您是否确定要继续。最后一个是提示，只是一个随机名称。

感谢所有答案！：D

Answer 1

document.getElementById('alert').addEventListener('click', function() {
  alert('Hello World');
});
document.getElementById('confirm').addEventListener('click', function() {
  confirm('Are you sure?');
});
document.getElementById('prompt').addEventListener('click', function() {
  prompt('Enter your name');
});

<button type="button" class="btn btn-primary m-1" id="alert">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt">Prompt!</button>

Answer 2

试试这个

function myFunctionAlert() {
    alert("I am an alert box!");
}
function myFunctionConfirm() {
    confirm("Are you Sure?");
}
function myFunctionPrompt() {
    prompt("Enter the number");
}

<button type="button" class="btn btn-primary m-1" id="alert" onclick="myFunctionAlert()" >Alert!</button>
            <button type="button" class="btn btn-success m-1" id="confirm" onclick="myFunctionConfirm()" >Confirm!</button>
            <button type="button" class="btn btn-info m-1" id="prompt" onclick="myFunctionPrompt()" >Prompt!</button>

Answer 3

onclick作为按钮的属性是一种可能性：

<button type="button" class="btn btn-primary m-1" id="alert" onclick="alert('Hello');">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm" onclick="confirm('Are you sure?');">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt" onclick="prompt('Enter something:');">Prompt!</button>

或为每个元素分配eventListener：

document.getElementById('alertButton').addEventListener('click', function() {
  alert('Hello');
});
document.getElementById('confirmButton').addEventListener('click', function() {
  confirm('Are you sure?');
});
document.getElementById('promptButton').addEventListener('click', function() {
  prompt('Enter something');
});

<button type="button" class="btn btn-primary m-1" id="alertButton">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirmButton">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="promptButton">Prompt!</button>

或使用onclick属性触发函数：

function someAlert() {
  alert("Hello");
}
function someConfirm() {
  confirm("Are you sure?");
}
function somePrompt() {
  prompt("Enter something:");
}

<button type="button" class="btn btn-primary m-1" id="alert" onclick="someAlert()">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirm" onclick="someConfirm()">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="prompt" onclick="somePrompt()">Prompt!</button>

Answer 4

得到它的工作，谢谢你的你好

document.getElementById('alertButton').addEventListener('click', function() {
  alert('Hello');
});
document.getElementById('confirmButton').addEventListener('click', function() {
  confirm('Are you sure?');
});
document.getElementById('promptButton').addEventListener('click', function() {
  prompt('Enter something');
});

<button type="button" class="btn btn-primary m-1" id="alertButton">Alert!</button>
<button type="button" class="btn btn-success m-1" id="confirmButton">Confirm!</button>
<button type="button" class="btn btn-info m-1" id="promptButton">Prompt!</button>

3个按钮上的Javascript警报

4 个答案: