从JavaScript变量更新了超文本标记语言

Question

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

下面是一些脚本(什么都不是)：

$(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

Answer 2

我认为你可以在你的超文本标记语言上创建一个div，然后使用：$('#id_of_div_where_you_want_to_write').html("text you want to write");

附注：这是javascript javascript != java o/

希望这对兄弟有帮助！

Answer 3

我已经把整个计算结果打出来了。我有一个提交按钮，通过点击需要检索总和。它不工作了..。我是javascript的新手，所以我不知道问题出在哪里。代码如下：

$('#home_price').submit(function(){
var shutter_price, lights_price, socket_price, screen10_price, screen7_price, dimmer_price, x
var total_price = 3000;
    shutter_price = ($('#shutter').val())*200;
    light_price = ($('#lights').val())*200;
    socket_price = ($('#socket').val())*200;
    screen10_price = ($('#screen10').val())*700;
screen7_price = ($('#screen7').val())*200;
dimmer_price = ($('#dimmer').val())*400;
if($('#boiler').is(":checked")==true){
    total_price+=600;
    x+=1;
}
x+=($('#shutter').val())*2+($('#lights').val())+($('#socket').val());
Math.floor(x);
x+=1;
total_price = total_price + shutter_price + light_price + socket_price + screen10_price + screen7_price +           dimmer_price + x*400;
$('#home_pricing').val()=total_price;
if($('#home_pricing').val() < 6000)
    alert('the solution invalid');
else
    alert(" total: " + $('#home_pricing').val());
});
});

和一段html代码：

<label for="screen7"> 7inch screen </label> 
<input style="margin-right:70px" name="screen7" type="number" id="screen7"> <br><br> 
    <label for="dimmer"> dimmer</label> 
    <input style="margin-right:174px" name="dimmer" type="number" id="dimmer"> <br><br> 
    <label for="boiler"> bolier </label>
    <input style="margin-right:148px" type="checkbox" name="boiler" id="boiler" > <br><br> 
    <div>
    <input type="submit" name=" home_pricing " id="home_pricing" value=" calculate " >
    </div>
    </form>

对于如何计算和检索带有答案的警告窗口或其他类型的窗口，有什么建议吗？

tnx