Question

I am VERY NEW to javascript and am messing around with some math. I currently have:

<input disabled="disabled" type="text" id="backer-prediction-answer" width="100" value="" />

<FORM> 
    <INPUT type="button" value="Apply" name="button1" onclick="apply()">
</FORM>

<script>
var backerPrediction1 = document.getElementById("backer-prediction-1").value;
var backerPrediction2 = document.getElementById("backer-prediction-2").value;
var backerPrediction3 = document.getElementById("backer-prediction-3").value;
var backerPrediction4 = document.getElementById("backer-prediction-4").value;

function apply(){
    var backers = parseInt(backerPrediction1,10) + parseInt(backerPrediction2,10);
    document.getElementById("backer-prediction-answer").value = (backers);
}
</script>

I would like to be able to hit apply and have it recalculate. Do I need to delete the variable before declaring it again? If so, how do I do that?

Answer 1

Move the variables backerPredictionX inside the function, so that they are evaluated everytime you apply()

<script>

function apply(){
    var backerPrediction1 = document.getElementById("backer-prediction-1").value;
    var backerPrediction2 = document.getElementById("backer-prediction-2").value;

    var backers = parseInt(backerPrediction1,10) + parseInt(backerPrediction2,10);
    document.getElementById("backer-prediction-answer").value = (backers);
}
</script>

---

With jquery (code not validated):

function apply(){
    var backerPrediction1 = $("#backer-prediction-1").val();
    var backerPrediction2 = $("#backer-prediction-2").val();

    var backers = parseInt(backerPrediction1,10) + parseInt(backerPrediction2,10);
    $("#backer-prediction-answer").val(backers);
}