Update HTML table/javascript variable as user inputs them?

Drew012 · 07-07-2012, 02:52 AM

Code:

<table id="totals">
       <tbody>
                <th scope="col">Social </th>
                <td id = "hello">&nbsp;</td>
        </tbody>    
</table>  

<script>
//this defines my four variables
var nSocial1, nSocial2, nSocial3, nSocial;
// this pulls the value from certain questions ("Q1") etc.
nSocial1 = parseInt(document.getElementById("Q1").value);
nSocial2 = parseInt(document.getElementById("Q9").value);
nSocial3 = parseInt(document.getElementById("Q17").value);
nSocial = nSocial1 + nSocial2 + nSocial3;

document.getElementById("hello").innerHTML = nSocial;

</script>

The table td id ="hello" is successfully filled with the javascript var "nSocial". However, as you can see, nSocial is composed of nSocial1+nSocial2+nSocial3. If I assign each of these to 10, it will successfully add them together to get 30. However, I want them to be set to 0 at default and to change/update automatically as the user inputs a value that can be determined by the corresponding ("Q").