Counter if word appears in div

Question

Take a look at my jsfiddle first. Now, I want to create a counter everytime Scissor, Rock and Paper appears in the div #myChoice. I have to do it like this.. so no other ways like on click whatever please.

How to do this?

 if "Rock" appears in the div #myChoice
 -> Rock Count: 1
 -> Paper Count: 0
 -> Scissor Count: 0

 if "Scissor" appears in the div #myChoice
 -> Rock Count: 1
 -> Paper Count: 0
 -> Scissor Count: 1

 if "Rock" appears in the div #myChoice AGAIN
 -> Rock Count: 2
 -> Paper Count: 0
 -> Scissor Count: 1

Thanks for your help & sorry for my latest question that nobody understood lol

Answer 1

Is this what you want ?

var helloLength = $('#container:contains("Hello")').length;
if(helloLength >= 1) {
 $("#counter").text("Hello " + helloLength + " times");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div id="container"> Hello </div>
 <div id="counter"> Hello: /*here the number*/ times </div>

If you want to count the number of hello, you should use class instead of id: like this:

var helloLength = $('.container:contains("Hello")').length;
if(helloLength >= 1) {
 $("#counter").text("Hello " + helloLength + " times");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container"> Hello </div> 
 <div class="container"> Hello </div>
 <div class="container"> Random div </div> 
 <div class="container"> Hello </div>
 <div class="container"> Hello </div>

 <div id="counter"> Hello: /*here the number*/ times </div>

Answer 2

Use Event delegation to handle clicks. If the user clicks on an option, then look for an associated count element and update the count. The example below uses .hasClass() to see if the element clicked on has a class name option (added to distinguish the options from other elements), parseInt() to check for a number in the count container and then isNaN() to check if the count number is actually a number (unlike an empty string).

$(document).ready(function() {
  $(document).click(function(event) {
    if ($(event.target).hasClass('option')) {
      $('#myChoice').text(event.target.innerText);
      var countElement = $('#' + event.target.id + 'Count');
      if (countElement.length) {
        var count = parseInt(countElement.text(), 10);
        if (isNaN(count)) {
          count = 0;
        }
        countElement.text(++count);
      }
    }
  });
});

#myChoice {
  width: 100px;
  height: 20px;
  border: 1px solid black
}
li {
  width: 50px;
  border: 1px solid black;
  padding: 3px;
  margin-bottom: 5px
}
li:hover {
  background-color: gainsboro;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div id="scissor" class="option">Scissor</div>
  </li>
  <li>
    <div id="rock" class="option">Rock</div>
  </li>
  <li>
    <div id="paper" class="option">Paper</div>
  </li>
</ul>
<br />
<div id="myChoice">
</div>
<br />

<div id="counter">
  <p>Scissor Count:
    <span id="scissorCount"></span>
  </p>
  <p>Rock Count:
    <span id="rockCount"></span>
  </p>
  <p>Paper Count:
    <span id="paperCount"></span>
  </p>
</div>

Answer 3

You can achieve this by using a regular expression and the match() method to find the number of occurrences of 'Hello' within your string. From there you can use text() on a span within the #counter element to show the value. Try this:

var re = /hello/gi;
var count = ($('#container').text().match(re) || []).length;

$('#counter .count').text(count);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"> Hello hello </div>
<div id="counter"> Hello: <span class="count"></span> times </div>

Answer 4

I just want to count +1 inside of a div everytime the other div contains the word Hello.

I took this to mean you want to count the number of times the word "Hello" is in the first div, so here's a simple loop to do that.

// create an array out of the text of #container using spaces to delimit
var text = $('#container').text().split(" ");
var count = 0;

// loop through the array of text and check to see if each word is "Hello"
for (var i = 0; i < text.length; i++) {
  if (text[i] === "Hello") {
    count++;
  }
}  

$('#counter').text("Hello: " + count + " times");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="container">Hello Hello Hello Hello</div>
<div id="counter"></div>

Answer 5

You can just use this simple function countWords()

function countWords(str){return (str.match(/Hello/g) || []).length;;}
$('#counterValue').text( countWords($("#container").text()) );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="container"> Hello and Hello but Hello is what I'm saying... last Hello!</div>
<div id="counter"> Hello: <span id="counterValue"></span> times </div>