附加子按钮的功能

时间:2016-04-27 17:14:20

标签: javascript jquery arrays parent-child

我试图制作代码来询问你的名字,然后说,"你好,_____,我的名字是多莉。"然后会出现三个按钮,其中包含对Dolly做什么的选项。

有没有什么办法可以添加一个函数来点击生成的按钮来相应地创建响应?如果它有点乱,不干,我很抱歉,我对此有点新鲜。

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

4 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

您可以使用以下javascript设置onclick属性:

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

为您创建的每个子按钮。

答案 2 :(得分:1)

添加你执行的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);

答案 3 :(得分:1)

您好,您可以设置属性onclick并传递您的功能

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