Question

这是我的代码：

function ayee() {
    confirm("Ready to play?");
    var age = prompt("How old are you?"),
    replacement = document.getElementById('container'),
    message;
    if (age >= 18) {
        message = "Let's get started!" ;
    } else {
        message = "You're under 18? Be careful out there....";
    }
    replacement.innerHTML = message ;
}

我想要做的是在年龄大于18的回报中，添加一个按钮以及点击后将发送到下一个功能的消息（或包含消息）。

PS：这是为了选择你自己的冒险游戏。

Answer 1

试试这个

replacement.innerHTML = message+"<button>Next</button>"
var s = replacement.getElementsByTagName("button")[0];
s.addEventListener("click",function() {alert("next");}) // change the function to
                                                        // suit your needs

想法是innerHTML创建DOM。然后，您可以使用普通的JavaScript函数getElementsByTagName来获取替换中的按钮

然后使用addEventListener

在点击按钮时添加事件监听器

这仅适用于modern browsers。要使它在IE9之前的IE中工作，请添加以下代码。有关详细信息，请参阅以下link

if(s.addEventListener)
     s.addEventListener("click",myFunction);
else if (s.attachEvent)
     s.attachEvent("click", myFunction);

fiddle

Answer 2

用一些参数编写你的函数

function myfunction(message){
//do something with message
}

并将message = "Let's get started!" ;更改为myfunction('Let's get started!')

Answer 3

做这样的事情：

var btn = document.createElement("button");
btn.value = "Begin";

if (age >= 18) {
    btn.addEventListener("click", function() {
        eighteen();
    });
}
else {
    btn.addEventListener("click", function() {
        notEighteen();
    }); 
}

container.appendChild(btn):

您还可以调用一个检查年龄的泛型函数，并运行两个不同的代码段，而不是为两个不同的函数添加事件侦听器。

请注意：当您声明变量时，应该在其后面加上“var”。（var a = "test";。）

Answer 4

在您要显示的html旁边添加一个按钮，并在按钮上添加一个单击处理程序，并在单击按钮时触发您要触发的功能，例如，简单的代码可以是：

function ayee() {
    confirm("Ready to play?");
    var age = prompt("How old are you?"),
    replacement = document.getElementById('container'),
    message;
    if (age >= 18) {
        //create a button
        var btn = "<input type='button' name='test' onclick='checkThis();' value='Click'>"; 
        //add the button to the message
        message = "Let's get started!" + btn ;
    } else {
        message = "You're under 18? Be careful out there....";
    }
    replacement.innerHTML = message ;
}
function checkThis() {
    alert("Clicked the button");
}

插入带功能的按钮？

4 个答案: