Javascript times the contents of div A with div B and display in div C (triggered when div A is changed)

Question

What I need is to listen for changes to the div "qty_a-row" then times the value of div "qty_a-row" with the value of div "price-a-row" and put the answer in div "sub-total-a-row"

Here is what I have tried..

<div id="qty-a-row" contenteditable='true'></div><br>
<div id="price-a-row" contenteditable='true'></div><br>
<div id="sub-total-a-row" contenteditable='true'></div>

var contents = $(".qty-a-row").html();
$(".qty-a-row").blur(function () {
  if (contents != $(this).html()) {
    var x = parseInt(document.getElementById("qty-a-row").value);
    var y = parseInt(document.getElementById("price-a-row").value);
    document.getElementById("sub-total-a-row").innerText = (x * y);
  }
});

For testing, I enter a value into the div "price-a-row" then enter a quantity in and the result should show but its now showing.

JSF added https://jsfiddle.net/eLgrmbuj/

Answer 1

You're using jQuery but you did not include it in the page which is why you get ReferenceError: $ is not defined
You're using a class selector to select your div for the blur event . is for class # is for id
Divs do not have value properties you'll have to use textContent to get the numbers

 var contents = $("#qty-a-row").html(); $("#qty-a-row").blur(function () { if (contents != $(this).html()) { var x = parseInt(document.getElementById("qty-a-row").textContent); var y = parseInt(document.getElementById("price-a-row").textContent); document.getElementById("sub-total-a-row").textContent = (x * y); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="qty-a-row" contenteditable='true'>2</div><br> <div id="price-a-row" contenteditable='true'>1.00</div><br> <div id="sub-total-a-row" contenteditable='true'></div>

---

See below for a version without jQuery

 var contents = document.getElementById("qty-a-row").innerHTML; document.getElementById("qty-a-row").addEventListener('blur', function () { if (contents != this.innerHTML) { var x = parseInt(document.getElementById("qty-a-row").textContent); var y = parseInt(document.getElementById("price-a-row").textContent); document.getElementById("sub-total-a-row").textContent = (x * y); } });

 <div id="qty-a-row" contenteditable='true'>2</div><br> <div id="price-a-row" contenteditable='true'>1.00</div><br> <div id="sub-total-a-row" contenteditable='true'></div>

Answer 2

make the div inputs and use the value property, fix the jquery selectors fix the event binding syntax remove the if condition, don't really know what that was about

<input id="qty-a-row" contenteditable="true" value="2" /><br />
<input id="price-a-row" contenteditable="true" value="1.00" /><br />
<div id="sub-total-a-row" contenteditable="true"></div>

$("#qty-a-row, #price-a-row").on('change', function () {
    var x = parseInt(document.getElementById("qty-a-row").value);
    var y = parseInt(document.getElementById("price-a-row").value);
    document.getElementById("sub-total-a-row").innerText = (x * y);
});

https://jsfiddle.net/6sh587ve/4/