Javascript点击计数并提交到文本区域答案

【问题标题】：Javascript click count and submit to text areaJavascript点击计数并提交到文本区域
【发布时间】：2013-04-20 11:42:40
【问题描述】：

我对编码相当陌生，正在尝试学习制作 Chrome 插件以向网站添加一些功能。我一直在努力寻找这个问题的答案，并且已经搜索并提出了很多不同的选项，但我找不到任何东西来创建我所追求的。

我正在寻找的是一个脚本，它可以让我计算 5 个不同按钮的点击次数，然后通过“提交”按钮将它们发送到文本区域。

[A] [B] [C] [D] [E] [发送]

因此，如果我单击按钮 A 两次、C 一次和 E 三次，然后单击“发送”，它会将其发送到我的 textarea，它会显示“Counted A2 C1 E3”，并会忽略任何未单击的内容。作为奖励，当文本发送到 textarea 时是否有可能自动提交？

希望这是有道理的，并期待我能得到任何帮助。

问候，帕津加

【问题讨论】：

为什么要在 textarea 中同时提交并提交？如果您希望它保持可见，则必须在后台进行提交。
下次尝试提供一些代码，因为很难确切知道您的意思。
我没有提交任何代码，因为老实说我现在的编码很糟糕。我已经尝试学习了几天并且正在尽可能多地学习，但显然我不太擅长编码，所以我寻求帮助并没有试图表明我对编码有太多了解，我正在使用这些信息从所有这些答案中了解更多信息并尝试成为更好的编码器。

标签： javascript click counter

【解决方案1】：

这段代码更好，你可以有尽可能多的按钮！

更新：修复键未排序的错误（例如：Counted E3 C1 A2）

<html>
<head>  
<script>
    var list = {};
    function increaseCounter(variable) {
        if(!list[variable])
            list[variable]=1;
        else
            list[variable]++;
    }
    function send() {
        var keys = [];
        for(x in list)
            keys.push([x,list[x]]);
        keys.sort();

        var s = "Counted", i;
        for( i = 0; i < keys.length; i++)
            s += " " + keys[i][0] + keys[i][1];
        document.getElementById('textarea').value = s;
    }
</script>
</head>
<body>
<textarea id="textarea"></textarea>

<button onclick="increaseCounter('A')">A</button>
<button onclick="increaseCounter('B')">B</button>
<button onclick="increaseCounter('C')">C</button>
<button onclick="increaseCounter('D')">D</button>
<button onclick="increaseCounter('E')">E</button>

<button onclick="send()">Send</button>
</body>
</html>

【讨论】：

johnchen902，您创建的正是我想要的。非常感谢您的帮助！

【解决方案2】：

您可以在这里找到可能的解决方案：http://jsfiddle.net/jrm2k6/gv8vZ/

您可以在方便时对其进行修改。

这里是使用的html：

<button type="button" id="a">A</button>
<button type="button" id="b">B</button>
<button type="button" id="c">C</button>
<button type="button" id="d">D</button>
<button type="button" id="e">E</button>
<textarea rows="5" cols="40" id="results">
</textarea>

还有js部分：

var buttonClicked = {"a":0, "b":0, "c":0, "d":0, "e":0};

$("button").click(function() {
  $("#results").text('');
  var clickedId = $(this).attr('id');
  buttonClicked[clickedId] +=1
  displayCounter();
});

function displayCounter()
{

    for(var elem in buttonClicked)
    {
        if (buttonClicked[elem] != 0)
        {
            $("#results").append(elem + " clicked " + buttonClicked[elem] + "\n");
        }
    }
}

编辑：这很好用，但TNW 提供了另一种更通用的方法，这里是小提琴http://jsfiddle.net/xRMRP/

【讨论】：

我会以其他方式看到它，使用属性。看看jsfiddle.net/xRMRP - 你不再需要字典（也不需要 id），当你想轻松添加更多按钮时，这一点很重要。
很好的解决方案，我只是想提供一个快速的方法，因为 Pazinga 没有提供任何代码，我们不应该只做完美的事情，因为他永远不会真正学会如何去做。我将编辑我的答案以重定向到您的小提琴，因为它真的很好:)

【解决方案3】：

试试下面的代码，它会帮助你：

<html>
<head>  

 <script>


  var A = 0;
    var B = 0;
    var C = 0;
    var D = 0;
    var E = 0;

    function increaseCounter(variable) {
        switch (variable) {
            case 'A':
                A++;
                break;
            case 'B':
                B++;
                break;
            case 'C':
                C++;
                break;
            case 'D':
                D++;
                break;
            case 'E':
                E++;
                break;
        }
    }


    function send() {

        var text='Counted ';
        if(A>0){
            text+=' A'+A;
        }
        if(B>0){
            text+=' B'+B;
        }
        if(C>0){
            text+=' C'+C;
        }
        if(D>0){
            text+=' D'+D;
        }
        if(E>0){
            text+=' E'+E;
        }
        document.getElementById('textarea').value =text;
    }
</script>
</head>
<body>
<textarea id="textarea"></textarea>

<button onclick="increaseCounter('A')">A</button>
<button onclick="increaseCounter('B')">B</button>
<button onclick="increaseCounter('C')">C</button>
<button onclick="increaseCounter('D')">D</button>
<button onclick="increaseCounter('E')">E</button>

<button onclick="send()">Send</button>
</body>
</html>

【讨论】：

我认为使用按钮的属性来计算点击次数会更好。
如果我点击按钮 A 两次，C 一次，E 三次，它会产生Counted A2 B0 C1 D0 E3，而它应该会产生Counted A2 C1 E3。
为什么不使用数组或对象而不是 5 个明确声明的变量？如果你有 35 个开关按钮会发生什么？它太大了。