Javascript 将 div A 的内容与 div B 的内容相乘并显示在 div C 中（在更改 div A 时触发）

Question

我需要的是监听 div "qty_a-row" 的变化，然后将 div "qty_a-row" 的值与 div "price-a-row" 的值相乘，并将答案放在 div "sub-total-一排”

这是我尝试过的..

<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);
  }
});

为了测试，我在 div“price-a-row”中输入一个值，然后输入一个数量，结果应该显示，但现在显示。

JSF 添加了https://jsfiddle.net/eLgrmbuj/

Answer 1

您正在使用 jQuery，但您没有将其包含在页面中，这就是您收到ReferenceError: $ is not defined
您正在使用类选择器为 blur 事件选择 div . 用于类#用于 id
Div 没有value属性，您必须使用textContent来获取数字

 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>

---

有关没有 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

制作 div 输入并使用 value 属性，修复 jquery 选择器修复事件绑定语法删除 if 条件，真的不知道那是什么

<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/