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”。点击第二个按钮时，文字“你完成了游戏！”应该提醒。但是点击第一个按钮，没有任何反应。编码错误在哪里？我在哪里忘了逗号？ ;）

Answer 1

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

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

Answer 2

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

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);
};

单击后使用Function创建Button

2 个答案: