CODEWITHSUNDEEP
javascriptjqueryvariables
Антон
Антон

Reputation: 3

Javascript (jquery) variable adding values instead of replacing, why?

dear friends.

I've found some case i cant understand.

Here is an example - whenether you choose 1,2,3,4 or 5 button, betPrice takes normally 1 value.

But if you press PUT button it will tell, betPrice variable has as many values inside, as you had pressed before! Why?

If you press 1,2,3,4 or 5 button again, it will be one value again.

Heading

$('.single-place-to-bet').find('a').on('click', function() {
      var betPrice;
      betPrice = $(this).find("span[class^='bet-price']").attr('class');
      console.log(betPrice);

      $("#sendnumber").click(
        function() {
          console.log(betPrice);
          
        }
      );
      });
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bet modal begin -->
</head>
<body>
<button id="sendnumber" name="sendnumber">Put</button>

<!-- bet modal end -->




<hr>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">

    <span class="result-for-final" data-numberid="choice1">
                 1
             </span>
    <span class="bet-price-1">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice2">
                 2
             </span>
    <span class="bet-price-2">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice3">
                 3
             </span>
    <span class="bet-price-3">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice4">
                 4
             </span>
    <span class="bet-price-4">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice5">
                 5
             </span>
    <span class="bet-price-5">???</span>
  </a>
</div>
</body>
</html>

Upvotes: 0

Views: 44

Answers (3)

Andrei
Andrei

Reputation: 410

There are actually multiple betPrice variables printing themselves with console.log().

This happens because you put ("#sendnumber")... inside your .on event handler, creating a new event handler everytime you click the Put button.

Move the second event handler creator outside the first one, like below, and you should be fine:

$('.single-place-to-bet').find('a').on('click', function() {
    var betPrice;
    betPrice = $(this).find("span[class^='bet-price']").attr('class');
    console.log(betPrice);

    $("#sendnumber").click(
        function() {
            console.log(betPrice);
        }
    );
});

Upvotes: 0

Prakhar
Prakhar

Reputation: 1485

Everytime any number is pressed, it is registering a new click listener for sendnumber button element. Place the button click listener outside the callback function of .single-place-to-bet listener

var betPrice;

$('.single-place-to-bet').find('a').on('click', function() {
  betPrice = $(this).find("span[class^='bet-price']").attr('class');
  console.log(betPrice);

});

$("#sendnumber").click(
  function() {
    if (betPrice) {
      console.log(betPrice);
    }
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="sendnumber" name="sendnumber">Put</button>

<!-- bet modal end -->




<hr>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">

    <span class="result-for-final" data-numberid="choice1">
        1
      </span>
    <span class="bet-price-1">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice2">
        2
      </span>
    <span class="bet-price-2">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice3">
        3
      </span>
    <span class="bet-price-3">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice4">
        4
      </span>
    <span class="bet-price-4">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice5">
        5
      </span>
    <span class="bet-price-5">???</span>
  </a>
</div>

Upvotes: 1

Antoine Bernier
Antoine Bernier

Reputation: 94

Each time the function runs, your set an additionnal event listener.

For your case you can't move the event listener out of the function, so you can une jQuery off() to remove any event listener on the button then set it again.

$('.single-place-to-bet').find('a').on('click', function() {
      var betPrice;
      betPrice = $(this).find("span[class^='bet-price']").attr('class');
      console.log(betPrice);

      $("#sendnumber").off().on('click',
        function() {
          console.log(betPrice);
          
        }
      );
      });
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- bet modal begin -->
</head>
<body>
<button id="sendnumber" name="sendnumber">Put</button>

<!-- bet modal end -->




<hr>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">

    <span class="result-for-final" data-numberid="choice1">
                 1
             </span>
    <span class="bet-price-1">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice2">
                 2
             </span>
    <span class="bet-price-2">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice3">
                 3
             </span>
    <span class="bet-price-3">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice4">
                 4
             </span>
    <span class="bet-price-4">???</span>
  </a>
</div>

<div class="single-place-to-bet col-xl-2 col-lg-2">
  <a href="#">
    <span class="result-for-final" data-numberid="choice5">
                 5
             </span>
    <span class="bet-price-5">???</span>
  </a>
</div>
</body>
</html>

Upvotes: 1

Related Questions