Create Button with Function after clicking

Question

I've got some functions...

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

..and a button that activates the first function.

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

So when I click on the "Click Me"-button, another button should be created, with the text "FINISH GAME". When clicking on that second button, the text "You finished the game!" should be alerted. But clicking on the first button, nothing happens. Where's the coding error? Where did I forget a comma? ;)

Answer 1

You are creating input element in wrong way.

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

It is because your variable btn is not a DOM element but string. You can create input element and set all its attributes like this:

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

or:

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