Question

javascript

window.onload=function() {
  document.getElementById("next").onclick=function() {
    document.getElementById("out_est_value").innerHTML=document.getElementById("est_value").value;
    document.getElementById("out_int_est_value").innerHTML=document.getElementById("est_value").value*0.75;
  }
}

input

<label>Estimated value of property:</label><input type="text" name="est_value" id="est_value" maxlength="30"class="required number"value=""/> <br>

output

<p> You told us the estimated value of your property is &pound;<span class="red" id="out_est_value"></span> based on this we estimate that the initial cash offer is likely be around &pound;<span class="red" id="out_int_est_value"></span>.<p>

Answer 1

Whenever possible, store objects which are found in the DOM (e.g. getElementById(x)) or accessed by looking up properties (e.g. element.value) in a separate variable if they will be accessed multiple times (essentially “reusing” them instead of finding them again). Doing so will increase the readability and performance of your code:

window.onload = function() {
  var estVal = document.getElementById("est_value")
    , outEstVal = document.getElementById("out_est_value")
    , outIntEstVal = document.getElementById("out_int_est_value");
  document.getElementById("next").onclick = function() {
    var val = estVal.value;
    outEstVal.innerHTML = val;
    outIntEstVal.innerHTML = val * 0.75;
  };
};

Also, if you are really using jQuery then embrace the convenient things it does for you (it’s really worth it!), such as finding DOM elements, adding event handlers, setting HTML contents, etc. Doing this will likely improve the maintainability of your code for yourself and other developers and help you avoid common cross-browser pitfalls:

$(document).ready(function() {
  var estVal = $("#est_value")
    , outEstVal = $("#out_est_value")
    , outIntEstVal = $("#out_int_est_value");
  $("#next").click(function() {
    var val = estVal.val();
    outEstVal.html(val);
    outIntEstVal.html(val * 0.75);
  });
});