jQuery Update Price from one div to another onChange

Question

I have a price that changes on interval timings. I need to be able to update the margin of another div when this price changes.

Price 1: £10,000 (changes dynamically)

Price 2: £12,000

Price 3: £8,000

Calc: Price 2 - Price 1 = Price 3

Link: https://jsfiddle.net/Layt8cuy/86/

$('.price1').change(function() {
  onTargetProfitChange()
});

function onTargetProfitChange(){
  var originalvalue = $(".price1").val();
}

Answer 1

The change event doesn't trigger when the div content is changed. It only fires when form element changes. You will have to fire a custom event when Price 1 is changed.

Fire something like $( ".price1" ).trigger( "change" ); when your Price 1 changes.

Then add an event handler like so $( ".price1" ).on('change', function() {}) to catch the fired event.

Another idea is to create a hidden form element and track the change on that. You can update Price1 in the form field instead of and then change the value in the and handle other changes in the event handler.

Update:

Add <input class="price-1-input" type="hidden" value="" /> to the top of your HTML.

Add $('.price-1-input').val(currentDiv.find('.price1').text()).trigger('change'); in your interval function after currentDiv = currentDiv.next();

Format that numbers using parseInt or parseFloat to do any calculations.

Code:

var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
  if (count == 5) {
    clearInterval(myInterval);
  } else {
    count++;
    currentDiv.hide();
    currentDiv = currentDiv.next();
    $('.price-1-input').val(currentDiv.find('.price1').text()).trigger('change');
    currentDiv.show();
  }
}, 3000);
    
 
// When Price 1 changes update new price

// Value of '#priceChange1' -'.price1'
$('.price-1-input').change(function() {
  onTargetProfitChange()
  console.log('changed')
});



function onTargetProfitChange(){
    var originalvalue = $(".price1").val();
}

#b,
#c,
#d,
#e {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
When value from Price 1 changes. Price 3 needs to update.<br />
Calc: Price 2 - Price 1 = Price 3
</p>
<input class="price-1-input" type="hidden" value="" />
<div id="a">
  <p>
  Price 1: £<span class="price1">12,000</span>
  </p>
</div>

<div id="b">
  <p>
  Price 1: £<span class="price1">13,000</span>
  </p>
</div>

<div id="c">
  <p>
  Price 1: £<span class="price1">14,000</span>
  </p>
</div>

<div id="d">
  <p>
  Price 1: £<span class="price1">15,000</span>
  </p>
</div>

<div id="e">
  <p>
  Price 1: £<span class="price1">16,000</span>
  </p>
</div>

<hr />

<p>Price 2: £<span>20,000</span></p>

<hr />

<p>Price 3: £<span id="price3">8,000</span></p>

Answer 2

Well first of all you will need to write a function to calculate the value of the price3 i.e onTargetChange() and then call this function inside your setInterval()

Also I have added the class active to current div to get the current price1 value...

Also .val() is used for input elements...here your value is inside span, so try to use text()...

Stack Snippet

var currentDiv = $("#a");
var nextDiv, count = 1;
var myInterval = setInterval(function() {
  if (count == 5) {
    return;
  } else {
    count++;
    currentDiv.removeClass("active").hide();
    currentDiv = currentDiv.next();
    currentDiv.addClass("active").show();
    onTargetChange();
  }
}, 3000);


function onTargetChange() {
  var price1Value = $(".active .price1").text();
  //console.log(price1Value);
  var price2Value = $(".price2").text();
  var price3Value = parseInt(price2Value) - parseInt(price1Value);
  $(".price3").text(price3Value);
}

#b,
#c,
#d,
#e {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
  When value from Price 1 changes. Price 3 needs to update.<br /> Calc: Price 2 - Price 1 = Price 3
</p>

<div id="a" class="active">
  <p>
    Price 1: £<span class="price1">12000</span>
  </p>
</div>

<div id="b">
  <p>
    Price 1: £<span class="price1">13000</span>
  </p>
</div>

<div id="c">
  <p>
    Price 1: £<span class="price1">14000</span>
  </p>
</div>

<div id="d">
  <p>
    Price 1: £<span class="price1">15000</span>
  </p>
</div>

<div id="e">
  <p>
    Price 1: £<span class="price1">16000</span>
  </p>
</div>

<hr />

<p>Price 2: £<span class="price2">20000</span></p>

<hr />

<p>Price 3: £<span class="price3">8000</span></p>