javascript - 从 JavaScript 变量更新 HTML

Question

我正在尝试构建一个表单，其中包含用户选择的一些数字类型输入和一个复选框。 我没有使用 php 它所有的 java 因为我试图使用他的输入来计算账单并打印出结果。 我如何打印这些变量？ document.write 不会这样做，因为它会在没有计算的情况下立即打印 var。

这是一些脚本(没什么):

$(document).ready(function(e) {
    $('.content_window').css('height','900');
    $('#top').css('float','none');
    var shutter_price
    shutter_price = ($('#shutter').val())*200;  
    if (shutter != '0' )
        write(shutter_price);   
});

和表单的输入:

<label for="shutter">shutter </label> 
<input style="margin-right:98px" name="shutter" type="number" id="shutter">

有什么建议吗？

Answer 1

与其 document.write 不如在页面上更新或添加一个元素。

例如，修改您提供的代码和标记:

Javascript (jQuery)

$(document).ready(function(e) {
    $('.content_window').css('height','900');
    $('#top').css('float','none');

    $('#shutter').on("change", function(e) {
        var shutter_price = $(this).val()*200;
        if (shutter_price >= 0) {
            $('#shutter-result').text(shutter_price);
        }
    });
});

HTML

<label for="shutter">shutter </label>
<input style="margin-right:98px" name="shutter" type="number" id="shutter" min="0" step="1" pattern="\d+" />

<div id="shutter-result"></div>

JSFiddle