附加子按钮的功能

Question

我正在尝试编写代码来询问您的姓名，然后显示，"Hello, _____, my name is Dolly." 然后会出现三个按钮，其中包含要对多莉执行的操作选项。

有什么方法可以添加生成按钮的 onclick 函数来相应地创建响应？如果它有点乱而且不干，我很抱歉，我有点新手。

<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>

Answer 1

您可以为创建的按钮添加新的事件侦听器。

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

Answer 2

您可以像这样使用 javascript 设置 onclick 属性：

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

对于您创建的每个子按钮。

Answer 3

添加你做的onclick功能：

btn.onclick = function() {};

所以对于第一个按钮你会做

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

Answer 4

您好，您可以像这样设置属性 onclick 并传递您的函数

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

javascript

arrays

jquery

parent-child