Счетчик кликов Javascript и отправьте текстовую область

Я довольно новичок в кодировании и пытаюсь научиться создавать плагин Chrome для добавления некоторых функций на сайт. Я изо всех сил пытаюсь найти ответ на этот вопрос и искал и придумал довольно много разных вариантов, но я ничего не могу понять, чтобы создать то, что мне нужно.Счетчик кликов Javascript и отправьте текстовую область

Что я и ищу - это сценарий, который позволит мне подсчитать клики по 5 разных кнопок, а затем отправить их в текстовое поле через кнопку «отправить».

[A] [B] [C] [D] [E] [отправить]

Так что, если бы я был нажать кнопку A дважды, C раз и E в три раза нажмите кнопку "отправить" было бы отправить это в мое текстовое поле, и он будет читать «Counted A2 C1 E3» и будет игнорировать все, что не было нажато. В качестве бонуса, возможно ли, что когда текст будет отправлен в текстовое поле, он будет автоматически отправлен?

Надеюсь, это имеет смысл, и я с нетерпением жду любой помощи, которую я смогу получить.

С уважением, Pazinga

источник

2013-04-20 Pazinga

Почему вы хотите иметь его как в textarea, так и в submit? Если вы хотите, чтобы он оставался видимым, подчинение должно было произойти в фоновом режиме. – TNW

Постарайтесь предоставить код в следующий раз, так как трудно точно узнать, что вы имеете в виду. –

Я не подавал никакого кода, потому что честно, я ужасен в кодировании на данный момент. Я пытаюсь учиться на пару дней, и я учусь как можно больше, но, видимо, я не очень хорошо разбираюсь в кодировании, поэтому я искал помощи, не пытаясь указать, что я слишком разбираюсь в кодировании, я использую информацию от всех этих ответов, чтобы узнать больше и попытаться стать лучшим кодером. – Pazinga

Этот код лучше, вы можете иметь столько кнопок, как вам нравится!

обновления: Исправлена ошибка, что ключи несортированные (например: Счетный 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>

источник

2013-04-20 12:05:39 johnchen902

johnchen902, вы создали именно то, что я ищу. Большое вам спасибо за вашу помощь! – Pazinga

Попробуйте код, приведенный ниже, это поможет вам:

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

источник

2013-04-20 11:51:28

Думаю, было бы лучше использовать атрибуты кнопок для подсчета кликов. – TNW

Если я дважды нажму кнопку A, C один раз и E три раза, он произведет 'Counted A2 B0 C1 D0 E3', в то время как это должно привести к' Counted A2 C1 E3'. – johnchen902

проверить отредактированный код –

Вы можете найти возможное решение здесь: 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"); 
     } 
    } 
}

EDIT: Это прекрасно работает, но TNW дал другой подход, более общий характер, здесь скрипку http://jsfiddle.net/xRMRP/

источник

2013-04-20 12:05:43

Я видел бы это иначе, используя атрибуты. Посмотрите на http: // jsfiddle.net/xRMRP/- вам больше не нужен dict (и тоже), что важно, если вы хотите добавить больше кнопок без проблем. – TNW

Отличное решение, я просто хотел дать быстрый подход, поскольку Pazinga не предоставил никакого кода, мы не должны просто делать что-то совершенное, так как он никогда не научится этому. Я отредактирую свой ответ, чтобы перенаправить на вашу скрипку, так как это действительно хорошо :) –

Счетчик кликов Javascript и отправьте текстовую область

ответ

Смежные вопросы