单击后创建具有功能的按钮

Question

我有一些功能...

function myFunction()
{
    var btn = "<input type='button' onclick='sf();'>";
    var t = document.createTextNode("FINISH GAME");
    btn.appendChild(t);
    document.body.appendChild(btn);
};
function sf(){window.alert("You finished the game!")};

..还有一个激活第一个功能的按钮。

<button onclick="myFunction()">Click Me!</button>

因此，当我单击 "Click Me" 按钮时，应该会创建另一个按钮，其文本为 "FINISH GAME"。单击第二个按钮时，应提醒文本 "You finished the game!"。但是点击第一个按钮，没有任何反应。编码错误在哪里？我在哪里忘了逗号？ ;)

Answer 1

这是因为你的变量 btn 不是 DOM 元素而是字符串。您可以创建输入元素并设置其所有属性，如下所示：

function myFunction() {
    var btn = document.createElement('input');
    btn.setAttribute('type', 'button'); // input element of type button
    btn.setAttribute('value', 'FINISH GAME');
    btn.onclick = sf;
    document.body.appendChild(btn);
};

或：

function myFunction() {
    var btn = document.createElement('button'); // button element
    var t = document.createTextNode("FINISH GAME");
    btn.appendChild(t);
    btn.onclick = sf;
    document.body.appendChild(btn);
};

Answer 2

您正在以错误的方式创建输入元素。

function myFunction()
{
    var btn = document.createElement('input');
    btn.setAttribute('type' , 'button');
    btn.setAttribute('value', 'FINISH GAME');
    document.body.appendChild(btn);
    btn.addEventListener('click','sf',false);

 };
function sf(){window.alert("You finished the game!")};

how to create element in JavaScript

单击后创建具有功能的按钮

Create Button with Function after clicking

javascript

alert

function

onclick

button