Function of appended child button

Question

I'm trying to make code to ask for your name, which then says, "Hello, _____, my name is Dolly." Then three buttons appear with options of what to do to Dolly.

Is there any way I can add a function onclick of the spawned buttons to create a response accordingly? I apologize if it's a bit messy and not dry, I'm kinda new to this.

<body>
    <p id="dolly"></p>
    <div id="div1">
        <h3 id="try" class="enterN">Please enter your name</h3>
        <input type="text" id="name" value="" placeholder="Please enter your name"> 
        <button id="submit" onclick="yourName()">Enter</button>
    </div>

    <script>
        function yourName() {
            var x = document.getElementById("name").value;
            if (x.length != 0) {
                document.getElementById("dolly").innerHTML = "Hello, " + x + ", My name is Dolly.";
                var btn = document.createElement("BUTTON");
                var t1 = document.createTextNode("Say Hello");
                btn.appendChild(t1);
                document.body.appendChild(btn);
                var btn = document.createElement("BUTTON");
                var t2 = document.createTextNode("Hug Dolly");
                btn.appendChild(t2);
                document.body.appendChild(btn);
                var btn = document.createElement("BUTTON");
                var t3 = document.createTextNode("Kill Dolly");
                btn.appendChild(t3);
                document.body.appendChild(btn);

                $(document).ready(function(){
                    $("#div1").remove();
                });

            } else {
                document.getElementById("dolly").innerHTML = "Please enter your name.";
            }
        }
    </script>
</body>

"Is there any way [that] I can add a function onclick of the spawned buttons to create a response accordingly?" You want to implement an onclick function. We can do that. "of the spawned buttons". What does that mean? — 8protons, Apr 27 '16 at 17:19

score 1 · Answer 1 · answered Apr 27 '16 at 17:19

1

You can add a new event listener to the created buttons.

btn.addEventListener('click', function() {
    // do some things
});

answered Apr 27 '16 at 17:19

spaceman

1,147
8
15

score 1 · Answer 2 · answered Apr 27 '16 at 17:19

1

You can set the onclick property with javascript like this:

btn.addEventListener('click', function(event) {
// code to be executed on click
}

for each of the child buttons you create.

answered Apr 27 '16 at 17:19

Cameron637

1,699
13
21

I wasn't trying to race to it. I just put what I first thought of and then I saw his answer and remembered that using addEventListener was better than onclick so I edited mine and then upvoted his. – Cameron637 Apr 27 '16 at 17:22

score 1 · Answer 3 · answered Apr 27 '16 at 17:20

to add the onclick function you do:

btn.onclick = function() {};

so for the first button you'd do

var btn = document.createElement("BUTTON");
btn.onclick = function() {};
var t1 = document.createTextNode("Say Hello");
btn.appendChild(t1);
document.body.appendChild(btn);

score 1 · Accepted Answer · answered Apr 27 '16 at 17:24

Hi you can set attribute onclick and pass your function like this

var btn = document.createElement("BUTTON");
var t1 = document.createTextNode("Say Hello");
btn.setAttribute("onclick", "function1()");
btn.appendChild(t1);
document.body.appendChild(btn);

Function of appended child button

4 Answers4