jQuery乘法不是'；他不为我工作

我试图将两个div中的值相乘，并将乘积放在第三个div中，但失败了。我试着遵循中的方法，但它似乎对我不起作用

具体来说，我有“add”和“subtract”控件来更改行数和列数（稍后使用）。我正在尝试获取当其他单元格中的任何一个发生更改时自动更新的单元格数（行*列）

。我使用的代码是：

<table id="controls">
<tr><td>Rows:</td><td><input type="button" value="+" onclick="javascript:appendRow()" class="append_row"/><input type="button" value="-" onclick="javascript:deleteRow()" class="delete"/></td><td class="numbers" id="numRows">2</td></tr>
<tr><td>Columns:</td><td><input type="button" value="+" onclick="javascript:appendColumn()" class="append_column"/><input type="button" value="-" onclick="javascript:deleteColumn()" class="delete"/></td><td class="numbers" id="numColumns">2</td></tr>
<tr>
<td colspan="2">Total cells:</td><td class="numbers" id="rc-product"></td></tr>
</table>

$('#controls').keyup(function(){
var rows_val = $('#numRows').val();
var columns_val = $('#numColumns').val();
$('#rc-product').val( rows_val * columns_val);
});

行数：2
栏目：2
单元格总数：
$（“#控件”）.keyup（函数（）{
var rows_val=$（'#numRows'）.val（）；
var columns_val=$（'#numColumns'）.val（）；
$（'rc product'）.val（行值*列值）；
});

---

但什么都没有表现出来。我应该使用parseInt和text（）？如何操作？

当您释放键盘上的一个键时，

keyup

事件被触发，因此这可能不是您想要的。为了在单击其中一个按钮时触发乘法函数，您需要使用

click

事件

function calculate() {
    var rows_val = $('#numRows').text();
    var columns_val = $('#numColumns').text();
    $('#rc-product').text(rows_val * columns_val);    
}

$('#controls').on('click', 'input[type=button]', calculate);
$(document).ready(calculate);

此外，要获取或设置DOM元素的内部内容，您应该使用（或者，如果您也希望拾取其中的HTML标记）方法，而不是

val

$('#controls').on('click', 'input[type=button]', function() {
    var rows_val = $('#numRows').text();
    var columns_val = $('#numColumns').text();
    $('#rc-product').text(rows_val * columns_val);
});

小提琴：

如果您希望在页面加载中也对函数求值，这样乘法结果就会显示在页面加载中，那么您可以将其转换为命名函数，并在

$（document）.ready

事件上运行它

function calculate() {
    var rows_val = $('#numRows').text();
    var columns_val = $('#numColumns').text();
    $('#rc-product').text(rows_val * columns_val);    
}

$('#controls').on('click', 'input[type=button]', calculate);
$(document).ready(calculate);

拨弄：

使用

单击（）

，因为您使用的是鼠标，而不是键盘键。另外，

val（）

仅与

input

和

textarea

元素相关。使用

text（）

：

使用

parseFloat（）

将元素中的文本字符串转换为可用于数学运算的数字（或

NaN

，如果字符串以非数字字符开头）<可以使用code>parseInt（）

要更新页面总加载/文档就绪，还可以使用

click（）

（无参数）触发click事件，该事件将调用以前绑定的click处理程序：

$('#controls').click(function () {
    var rows_val = parseFloat($('#numRows').text()),
        columns_val = parseFloat($('#numColumns').text());
    $('#rc-product').text(rows_val * columns_val);
});

参考资料：

---

好的，我想我明白你的问题所在了。您试图使用$.val（）检索div中的文本。$.val（）返回输入元素的value属性。使用$.text（）将修复此问题
请参阅此更新的小提琴：
您还需要将所有逻辑放入文档就绪函数中，如下所示：

$(function() {
  $('#controls input[type="button"]').click(function(){
    var rows_val = $('#numRows').text();
    var columns_val = $('#numColumns').text();
    $('#rc-product').text( rows_val * columns_val);
    console.log(rows_val, columns_val);
  });
});

---

您是否尝试过设置断点并查看值是否存在？你试过把乘法移到作业之外吗？我会熟悉一个调试器（我在Chrome中使用F12），因为它使JS World中的生活更加轻松。你可以使用.html或.text，但不能使用.val。为什么你要绑定keyup事件？没有任何东西可以写入，这样事件就不会触发？您应该在所有地方使用

text（）

，

val（）

用于输入字段。下面的提琴可以工作，但我添加了一个按钮来执行计算，非常感谢！这就是诀窍。我没有代表投票给你，但如果可以的话，我会的。我很高兴能帮助你！这个答案解决了你的问题，但是，考虑接受它作为你的问题的答案（通过检查蜱痕除了文本）。或者，如果另一个答案对你有帮助，请考虑接受。