페이지를 다시로드하지 않고 자바 스크립트를 사용하여 웹 페이지를 업데이트하십시오.

Question

사용자가 동일한 페이지의 다른 부분에서 입력 필드를 변경할 때 자바 스크립트를 사용하여 웹 페이지의 일부를 업데이트하는 방법을 알아 내려고하고 있습니다. 그러나 document.write를 사용하고 있기 때문에 페이지를 새로 고침하지 않으면 나중에 다시 돌아가서 업데이트 할 수 없습니다. 나는 JavaScript가 지나치게 유능하지 않다는 것을 인정합니다. 누군가가 나에게이 문제에 접근하는 방법에 대한 조언을 해줄 수 있다면 그것은 가장 높이 평가 될 것이다. Ajax를 사용하지 않고이 작업을 수행 할 수있는 방법이 있기를 희망합니다. 이는 매우 단순한 작업이므로 너무 복잡해지기를 원하지 않습니다.

내 사이트에는 div를 보여주고 숨겨서 페이지를로드/다시로드하지 않고 단계별로 진행하는 5 단계 견적 계산기가 있습니다. 마지막 단계 인 5 단계에서 1 단계를 기반으로 계산을 수행하고 document.write를 사용하여 결과를 출력합니다. 그러나 사용자가 1 단계로 돌아가서 입력 텍스트 필드를 변경하도록 허용하기 때문에 5 단계의 계산이 반환 될 때 올바르지 않게됩니다.

단계를 거치는 멋진 전환 효과를 내기 위해 jQuery를 사용하고 있으므로 페이지를 다시로드하지 않는 것이 좋습니다. 이와 같은 문제에 접근하는 가장 좋은 방법은 무엇입니까?

나는 내 자신에 대한 연구를 기꺼이 하겠지만, 어디서부터 시작해야할지 정확히 알지 못한다. 감사합니다

Answer 1

잘 단계 5의 필드가 자동으로 업데이트되도록 1 단계에서 필드의 onchange 이벤트에 대한 계산을 바인딩해야합니다.

예 : 스크린 (1) :

화면 5

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

:

<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>'); 
} 

* 주 : DOM 조작하게 때문에 jQuery를 사용하고 매우 쉽고 크로스 브라우저 호환. 자세히 알아보기 http://jquery.com/