CODEWITHSUNDEEP
javascriptjqueryonclickincrement
Oliver Sun
Oliver Sun

Reputation: 11

How to increment a number by its value jquery

I have a button that when clicked, it should take a random number and add on its original value back to its current value whenever the button is clicked. For example, if the random number (var diamondGuess) is 10, the number 10 first appears in a div (id="d-num-test"). Whenever you click the button, 10 should be added to the number value showing in the div. The random number function doesn't chose a new random number until the round is reset.

So if I start with 10 and click the button, div id="d-num-test" should change to 20 on the page. Click again and it's 30, then 40, etc..... I tried researching various operators and math methods but the closest I got was +=. This would work if 10 wasn't a random selection. I tried += with the variable itself, but it doubles exponentially (10, 20, 40, 80 using the example above).

Any advice would be greatly appreciated! Newbie here

Thank you! Oliver

$(document).ready(function() {

  var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var diamondGuess = diamondNum[Math.floor(Math.random() * diamondNum.length)];
  var diamondNumDom = $('#d-num-test');
  diamondNumDom.text(diamondGuess);

  $('#diamond').on("click", function() {
    diamondNumDom.text(diamondGuess += diamondGuess);
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d-num-test"></div>
<button id="diamond"></button>

Upvotes: 1

Views: 783

Answers (2)

vol7ron
vol7ron

Reputation: 42109

Below is a VanillaJS (jQuery-free) example of how you might accomplish this. One issue in your logic is the diamondGuess += diamondGuess, which means the guess would increase exponentially (as you experienced).

You can avoid this by using the value of the textContent, or as alternatively, making use of the data-attributes as I have done below. Because the data-* attributes store a string, I used the unary-plus (+ prefix) to convert the string to numeric values (as seen with +numBox.dataset.value + +numBox.dataset.guess).

The nice thing about this approach is it couples the guess and value to the element. With a little work you could convert the ids to class and a few other minimal adjustments and you could have independent calculators on the same page. 

var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
let numBox = document.querySelector('#d-num-test');

// Initialize values & attach guess to element
numBox.dataset.guess = diamondNum[Math.floor(Math.random() * diamondNum.length)];
numBox.dataset.value = numBox.dataset.guess;
numBox.textContent = numBox.dataset.guess;


// Click Event
document.addEventListener('click', function(e) {
  if (e.target.matches('#diamond')) {
    let numBox = document.querySelector('#d-num-test');
    numBox.dataset.value = +numBox.dataset.value + +numBox.dataset.guess;
    numBox.textContent = numBox.dataset.value;
  }
}, false);
<div id="d-num-test"></div>
<button id="diamond">Diamond</button>

Upvotes: 0

Robby Cornelissen
Robby Cornelissen

Reputation: 97162

To prevent overwriting your diamondGuess value, you need to introduce an additional variable (diamondValue in the snippet below) to keep track of the current value:

$(document).ready(function() {
  var diamondNum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
  var diamondGuess = diamondNum[Math.floor(Math.random() * diamondNum.length)];
  var diamondValue = diamondGuess;
  var diamondNumDom = $('#d-num-test');
  
  diamondNumDom.text(diamondValue);

  $('#diamond').on("click", function() {
    diamondValue += diamondGuess;
    diamondNumDom.text(diamondValue);
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d-num-test"></div>
<button id="diamond"></button>

Upvotes: 1

Related Questions