2016-04-27 53 views
0

我試圖讓代碼問你的名字,然後說,「你好,_____,我的名字是多莉。」然後出現三個按鈕,可以選擇對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> 
+0

「有沒有什麼方法可以添加一個函數onclick生成的按鈕來創建一個相應的響應?」你想實現一個onclick函數。我們能做到這一點。 「產生的按鈕」。那是什麼意思? – 8protons

回答

1

嗨您可以設置onclick屬性,並通過你的函數類似這樣的

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

您可以將新的事件偵聽器添加到創建的按鈕。

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

您可以設置使用JavaScript的onclick屬性是這樣的:

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

爲您建立的每個子按鈕。

+0

我並沒有試圖與它競爭。我只是把我第一次想到的東西,然後我看到他的回答,並記得使用addEventListener比onclick好,所以我編輯我的,然後upvoted他的。 – Cameron637

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