选中不同的下拉选项，让输入框自动清0

Question

<form name="tradeSellForm" method="post" action="/Project/tradeSell.do">
<select name="offerState">
      <option value="1" style="color:#FF9C00;width:79px;"> 水晶 </option>
      <option value="2" style="color:#FF9C00;width:79px;"> 金属 </option>
      <option value="3" style="color:#FF9C00;width:79px;"> 粮食 </option>
      <option value="4" style="color:#FF9C00;width:79px;"> 银币 </option>
    </select>
<input type="text" name="offerRes" value="0" >
<input type="button" name="b5" value=1000 onclick=haha5()>
</form>
</body>
<script>
var sumsj=1000;
var sumjs=5000;
var sumls=3000;
var sumrb=4000;
</script>
<script>
function haha5(){
var d=document.tradeSellForm.offerState.value-1;
var x5=parseInt(document.tradeSellForm.offerRes.value);
var s5=parseInt(document.tradeSellForm.b5.value);
var number=new Array(sumsj,sumjs,sumls,sumrb)
x5=x5+s5;
if(x5<number[d]){document.tradeSellForm.offerRes.value=x5;}
else{document.tradeSellForm.offerRes.value=number[d];}
}
</script>
我做了这么一个效果，现在还有一点缺陷就是，怎样使得选择不同的下拉选项的时候，输入框也随着自动清0，然后点击按钮之后，实现我上面的效果，点击按钮，输入框的值增加，当大于与他比较的值的时候，等于比较值，反之则取他本身的值

Answer 1

<form name="tradeSellForm" method="post" action="/Project/tradeSell.do"> 
<select name="offerState" onChange="document.getElementById('offerRes').value=''"> 
       <option value="1" style="color:#FF9C00;width:79px;"> 水晶  </option> 
       <option value="2" style="color:#FF9C00;width:79px;"> 金属  </option> 
       <option value="3" style="color:#FF9C00;width:79px;"> 粮食  </option> 
       <option value="4" style="color:#FF9C00;width:79px;"> 银币  </option> 
     </select> 
<input type="text" id="offerRes" name="offerRes" value="0" > 
<input type="button" name="b5" value=1000 onclick=haha5()> 
</form> 

Answer 2

清0document.getElementById('offerRes').value='0'