Counting occurrences of a given input

Question

If I had an input box with a simple submit button, is there a way to keep track of the amount of times the button was clicked when certain input was given. For instance, I enter milk and hit submit, milk count would be 1, click again milk count would be two. I know that using a simple counter variable, I can keep track of the count, but the count would not match any particular input per se, it's just a generic counter of button clicks. I could store the values from the input in an array and then count the occurrences of a particular item to find its count, but is there a more elegant way to do this?

Answer 1

You can use a simple object to store the occurrences. The basic idea is to grab the input value and add it to an object, using the input as the index, with the value being the number of times it's been added.

$(document).ready(function(){
    
  // Create simple storage
  var items = {};
  
  $('#submit').click(function(event){
    event.preventDefault();
    
    var item = $('#item').val();
    items[item] = items[item]+1 || 1;
    
    $('#result').html(JSON.stringify(items));
    
    $('#item').val('');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="item" name="item">
<input id="submit" type="submit">
<div id="result">

</div>

Answer 2

Solution without jQuery, and some nicely formatted JSON:

// Create storage and find nodes we need
var items = {};
var btn = document.getElementById('submit');
var textInput = document.getElementById('item');
var result = document.getElementById('result');

// Add event-handler for button click
btn.addEventListener('click', function(event){
    event.preventDefault();
    
    // Increment counter
    items[textInput.value] = items[textInput.value]+1 || 1;
    
    // Prettyprint the result
    result.textContent = JSON.stringify(items, null, 2);
    
    // Reset text
    textInput.value = '';
});

<input id="item">
<input id="submit" type="submit">
<pre id="result">
</pre>

Answer 3

var listCount   = [];
$("#getButton").click(function() {
    var getTextValue    = $("#getInput").val();
    if(getTextValue!="") {
        var initVal     = typeof(listCount[getTextValue])=="undefined" ? 0 : listCount[getTextValue];
        listCount[getTextValue] = parseInt(initVal)+1;
        alert(listCount[getTextValue]);
    }
    return false;
});

Initialized an Array var listCount = [];, which stores the Input Value as Associative Key, and parseInt(initVal)+1 increments the value of n times click.