计数器按钮和新按钮答案

【问题标题】：counter button and new button计数器按钮和新按钮
【发布时间】：2015-07-31 12:05:09
【问题描述】：

我正在尝试创建按钮，当单击它时，它会返回它被单击的次数以及每次单击按钮的次数；

一个新按钮被添加到页面（这是一个新按钮，所以它还没有被点击）添加到页面的每个按钮都应该与第一个按钮具有相同的交互。单击它会增加它的值并在页面上创建新按钮。

到目前为止，我已经找到了计数器按钮，但似乎无法在页面上添加按钮。请帮忙...

var clicks = 0;
function onClick(){
    clicks +=1;
    document.getElementById("button").innerHTML=  "I've been clicked " +clicks + 
" times" ;
};

【问题讨论】：

jsfiddle.net/arunpjohny/a9efyju7/2
我也忘记提最后一部分了...而且检查工作时，确保在页面上点击n个按钮后，所有按钮计数器的总和应该是n，并且有应该是页面上的 n+1 个按钮。
我认为上述示例中正在发生这种情况
@ArunPJohny 为什么不回答？

标签： javascript html

【解决方案1】：

createElement() 方法可能是最简单的方法...http://www.w3schools.com/jsref/met_document_createelement.asp

var clicks = 0;
var button = 0;
function onClick(){
    clicks +=1;
    button++
    document.getElementById("button").innerHTML=  "I've been clicked " +clicks + 
" times" ;
    var newButton = document.createElement("button"+button);
    document.body.appendChild(newButton);
    document.getElementById("button"+button).innerHTML = "I Have Not Been Clicked Yet"
};

【讨论】：

永远不要相信 w3schools；它充满了错误。你应该提供代码示例而不是链接。
我的意思是点击评论而不是回答......所以我为此道歉。然而，对于如此简单的事情，它来自哪里并不重要。

【解决方案2】：

这是我的代码！希望对你有帮助...

<!DOCTYPE html>
<html lang = 'es'>
    <head>
        <title> MY TEST </title>
        <meta charset = 'utf-8'>

    </head>
    <body id = 'body'>
        <input type = 'button' value = 'Clicked 0 times' id = 'Button' data-clicks = 0 ></input>

        <script>
            var firstButton = document.getElementById('Button');
            firstButton.addEventListener('click', createAndAdd);

            function createAndAdd(e){
                var button = e.target;

                // Reference to the data-clicks attribute
                var clicksAttribute = button.getAttribute('data-clicks');

                var clicksAttributeValue = parseInt(clicksAttribute);           
                button.value = 'Clicked ' + (clicksAttributeValue + 1) + ' times';

                clicksAttribute = clicksAttributeValue + 1;
                button.setAttribute('data-clicks', clicksAttribute);

                //Creating and adding the attributes of the new button.
                newInputButton = document.createElement('input');
                newInputButton.setAttribute('type', 'button');
                newInputButton.setAttribute('value', 'Clicked 0 times');
                newInputButton.setAttribute('id', 'Button');
                newInputButton.setAttribute('data-clicks', 0);

                //Adding the event Listener to the new button
                newInputButton.addEventListener('click', createAndAdd)

                //Adding the new button to the body
                var body = document.getElementById('body');
                body.appendChild(newInputButton);

            }
        </script>
    </body>
</html>

【讨论】：