jQuery Simple Multiplication Form (onkeyup)

Question

我试图让这个jQuery计算器工作，但它不是。我做错了什么？

$(document).ready(function() {
    $('input#height-input').keyup(function() {
        var a = $('input#diameter-input').val();
        var b = $('input#height-input').val();
        var c = 0.139885;
        var d = 42;
        $('div#barrels-result').val(a * a * b * c);
        $('div#gallons-result').val(a * a * b * c * d);
    });
});

http://jsfiddle.net/xxac8/

Answer 1

.val（） 方法主要用于获取/设置表单元素的值，如输入、选择和文本区域。 设置元素的内容时，要使用 .text（）。

$(document).ready(function() {
    $('input#height-input').keyup(function() {
        var a = $('input#diameter-input').val();
        var b = $('input#height-input').val();
        var c = 0.139885;
        var d = 42;
        $('div#barrels-result').text(a * a * b * c);
        $('div#gallons-result').text(a * a * b * c * d);
    });
});

JS小提琴：http://jsfiddle.net/xxac8/2/

Answer 2

使用 .text() 设置 DIV 的内容，而不是.val() 。

$(document).ready(function() {
    $('input#height-input').keyup(function() {
        var a = $('input#diameter-input').val();
        var b = $('input#height-input').val();
        var c = 0.139885;
        var d = 42;
        $('div#barrels-result').text(a * a * b * c);
        $('div#gallons-result').text(a * a * b * c * d);
    });
});

演示