使用javascript更新wepage而不重新加载页面

Question

我想弄清楚如何在用户更改同一页面的另一部分上的输入字段时使用Javascript更新网页的一部分。但是因为我正在使用document.write，我以后不能再回来并更新它，除非我重新加载页面。我承认我不太擅长JavaScript。如果任何人都可以给我如何解决这个问题的建议，将不胜感激。我希望有一种方法可以在没有Ajax的情况下执行此操作，因为这只是一个非常简单的任务，我不希望它太复杂。

我的网站有一个5步报价计算器，它显示并隐藏divs，以在不加载/重新加载页面的情况下完成这些步骤。在最后一步，第5步，我根据步骤1执行计算并使用document.write输出它。但是由于我允许用户返回到步骤1并对输入文本字段进行更改，因此第5步中的计算在返回时不正确。

我想避免页面重新加载，因为我使用jQuery来做一些很酷的过渡效果，你会经历这些步骤。处理这样的问题的最佳方法是什么？

我很乐意自己做一些研究，但我不确定从哪里开始。谢谢

Answer 1

那么你应该绑定第1步中字段的onchange事件的计算，以便步骤5中的字段自动更新。

例： 在屏幕1：

<input type="text" name="inputFromScreen1" id="input1" onchange="calculateResult()"> 

在屏幕5：

<div id="results"></div> 

JS：

function calculateResult() 
{ 
    //parse the values into float or int otherwise you'll get a concatenated string 
    var result=parseInt($("#input1").val())+.....; 

    //check if your result is a number 
    if (!isNaN(result)) 
     $("#results").html('<p>'+result+'</p>'); 
} 

*注：我使用JQuery的，因为它使DOM操作非常容易，并且是跨浏览器兼容的。了解更多信息http://jquery.com/