For example, suppose my input data and UI is not in 1 to 1 relationship:

html:

<script> aChanged=function(){ }; bChanged=function(){ }; cChanged=function(){ }; </script> a:<input id="a" onchange="aChanged()"/>,b:<input id="b" onchange="bChanged()"/>,c:<input id="c" onchange="cChanged()"/><br/> a+b=<span id="a+b"></span><br/>b+c=<span id="b+c"></span><br/>a+c=<span id="a+c"></span> 

which change "a" needs to refresh "a+b" and "a+c". My question is, how should I write the update UI functions?

Style 1 : define more methods but updates requires UI only:

aChanged=function(){ updateAB(); updateAC(); }; bChanged=function(){ updateAB(); updateBC(); }; cChanged=function(){ updateBC(); updateAC(); }; updateAB=function(){ document.getElementById("a+b").innerHTML=Number(document.getElementById("a").value)+Number(document.getElementById("b").value); }; updateBC=function(){ document.getElementById("b+c").innerHTML=Number(document.getElementById("b").value)+Number(document.getElementById("c").value); }; updateAC=function(){ document.getElementById("a+c").innerHTML=Number(document.getElementById("a").value)+Number(document.getElementById("c").value); }; 

Style 2 : define less methods but it may update some UI unnecessarily (eg:change a may also refresh b+c):

aChanged=function(){ updateABC(); }; bChanged=function(){ updateABC(); }; cChanged=function(){ updateABC(); }; updateABC=function(){ document.getElementById("a+b").innerHTML=Number(document.getElementById("a").value)+Number(document.getElementById("b").value); document.getElementById("b+c").innerHTML=Number(document.getElementById("b").value)+Number(document.getElementById("c").value); document.getElementById("a+c").innerHTML=Number(document.getElementById("a").value)+Number(document.getElementById("c").value); }; 

Which style should I use?