Question

我对编码很新，并且正在尝试制作Chrome插件，以便为网站添加一些功能。我一直在努力寻找答案，并且已经搜索并提出了很多不同的选择，但我无法想象创造我所追求的东西。

我和我期待的是一个脚本，它允许我计算5个不同按钮的点击次数，然后通过“提交”按钮将它们发送到textarea。

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

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

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

此致 Pazinga

Answer 1

此代码更好，您可以拥有任意多个按钮！

更新：修复密钥未排序的错误（例如：计数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>

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

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

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

3 个答案: