我的javascript计算器没有保留值

时间:2014-06-16 19:46:40

标签: javascript html

http://trailmeister.com/calculator.html非常简单的javascript计算器 函数“Calculate”发生在任何变量输入变化上,“Calculate”链接运行一个简单的函数,用任意值(现在)填充表单元素“tripweight”的值 - 它sems工作,然后立即恢复清空......想法?

Javascript(表格如下):

function calculate(){
    safecarry();
    //tripweight();
    tackweightsub();
}

/* SAFE CARRY */
function safecarry(){
    document.forms['calculator'].safecarry.value = document.forms['calculator'].equineweight.value * .2
}


/* TOTAL TRIP WEIGHT*/
function tripweight() {
    document.forms['calculator'].tripweight.value = 12
}
// riderweight+tackweightsub+gearweightsub+foodweightsub


/* CAPACITY
function
safecarry-triptotal
*/


/* PERCENTAGE
function
capacity / safecarry
*/


/* TACK WEIGHT SUBTOTAL */
function tackweightsub(){
    document.forms['calculator'].tackweightsub.value = parseFloat(saddle.value) + parseFloat(saddlepad.value) + parseFloat(bridle.value) + parseFloat(reins.value) + parseFloat(crupper.value) + parseFloat(saddlebags.value) + parseFloat(cantlebags.value) + parseFloat(pommelbags.value) + parseFloat(packsaw.value) + parseFloat(othertack.value)
}


/* CAMP WEIGHT SUBTOTAL */
function campweightsub(){
    document.forms['calculator'].campweightsub.value = parseFloat(sleepingbag.value) + parseFloat(sleepingpad.value) + parseFloat(tent.value) + parseFloat(tarp.value) + parseFloat(waterfilter.value) + parseFloat(campstove.value) + parseFloat(stovefuel.value) + parseFloat(cookpot.value) + parseFloat(highline.value) + parseFloat(othercamp.value)
}


/* FOOD WEIGHT SUBTOTAL*/
function foodweightsub(){
    document.forms['calculator'].foodweightsub.value = parseFloat(humanfood.value) + parseFloat(equinefood.value) + parseFloat(otherfood.value) 
}


<form class="form" id="calculator" name="calculator">
  <h2> PACK WEIGHT CALCULATOR </h2>
  <p class="name">Equine Weight: <input onchange="calculate();" name="equineweight" type="text" placeholder="Equine Weight" value="1100" id="equineweight" /></p>
     <p class="name">Pounds Your Horse Can Safely Carry: <input  readonly="readonly" name="safecarry" type="text" value="220" placeholder="" id="safecarry" /></p>
     <p class="name">Riders Weight: <input = name="riderweight" type="text" value="175" placeholder="" id="riderweight" /></p>
     <p class="name">Total Weight for your trip: <a href="" onclick = "tripweight();">[ calculate ] </a><input = name="tripweight" type="text"  placeholder="" id="tripweight" /></p>


  </p>
  <hr>
  <p class="name">Capacity: <input  name="capacity" type="text" value="0" placeholder="" id="capacity" /></p>
  <p class="name">Percentage Over Optimal: <input  name="percentage" type="text" value="0" placeholder="" id="percentage" /></p>
  </p>
  <hr>

  <p class="name">Tack Weight Subtotal: <input  readonly="readonly" name="tackweightsub" type="text" value="43" placeholder="" id="tackweightsub" /></p>
  <p class="name">Saddle: <input  onchange="calculate();" name="saddle" type="text" value="31" placeholder="" id="saddle" /></p>
  <p class="name">Saddle Pad: <input  onchange="calculate();" name="saddlepad" type="text" value="5" placeholder="" id="saddlepad" /></p>
  <p class="name">Bridle: <input  onchange="calculate();" name="bridle" type="text" value="0.75" placeholder="" id="bridle" /></p>
  <p class="name">Reins: <input  onchange="calculate();" name="reins" type="text" value="1" placeholder="" id="reins" /></p>
  <p class="name">Crupper: <input  onchange="calculate();" name="crupper" type="text" value="0.5" placeholder="" id="crupper" /></p>
  <p class="name">Saddle Bags: <input  onchange="calculate();" name="saddlebags" type="text" value="1" placeholder="" id="saddlebags" /></p>
  <p class="name">Cantle Bags: <input  onchange="calculate();" name="cantlebags" type="text" value="0.75" placeholder="" id="cantlebags" /></p>
  <p class="name">Pommel Bags: <input  onchange="calculate();" name="pommelbags" type="text" value="0.5" placeholder="" id="pommelbags" /></p>
  <p class="name">Pack Saw: <input  onchange="calculate();" name="packsaw" type="text" value="2" placeholder="" id="packsaw" /></p>
  <p class="name">First Aid Kit: <input  onchange="calculate();" name="firstaid" type="text" value="0.5" placeholder="" id="firstaid" /></p>
  <p class="name">Other: <input  onchange="calculate();" name="othertack" type="text" value="0" placeholder="" id="othertack" /></p>
  </p>
  <hr>

  <p class="name">Camp Weight Subtotal: <input  readonly="readonly" name="campweightsub" type="text" value="8" placeholder="" id="campweightsub" /></p>
  <p class="name">Sleeping Bag: <input  onchange="calculate();" name="sleepingbag" type="text" value="2" placeholder="" id="sleepingbag" /></p>
  <p class="name">Sleeping Pad: <input  onchange="calculate();" name="sleepingpad" type="text" value="1" placeholder="" id="sleepingpad" /></p>
  <p class="name">Tent: <input  onchange="calculate();" name="tent" type="text" value="1" placeholder="" id="tent" /></p>
  <p class="name">Tarp: <input  onchange="calculate();" name="tarp" type="text" value="0.5" placeholder="" id="tarp" /></p>
  <p class="name">Water Filter: <input  onchange="calculate();" name="waterfilter" type="text" value="0.5" placeholder="" id="waterfilter" /></p>
  <p class="name">Camp Stove: <input  onchange="calculate();" name="campstove" type="text" value="0.25" placeholder="" id="campstove" /></p>
  <p class="name">Stove Fuel: <input  onchange="calculate();" name="stovefuel" type="text" value="0.5" placeholder="" id="stovefuel" /></p>
  <p class="name">Cook Pot: <input  onchange="calculate();" name="cookpot" type="text" value="0.75" placeholder="" id="cookpot" /></p>
  <p class="name">Highline Kit: <input  onchange="calculate();" name="highline" type="text" value="1" placeholder="" id="highline" /></p>
  <p class="name">Other: <input  onchange="calculate();" name="othercamp" type="text" value="0" placeholder="" id="othercamp" /></p>
  </p>
  <hr>

  <p class="name">Food Weight Subtotal: <input  readonly="readonly" name="foodweightsub" type="text" value="4.5" placeholder="" id="foodweightsub" /></p>
  <p class="name">Human Food: <input  onchange="calculate();" name="humanfood" type="text" value="2.5" placeholder="" id="humanfood" /></p>
  <p class="name">Equine Food: <input  onchange="calculate();" name="equinefood" type="text" value="2" placeholder="" id="equinefood" /></p>
  <p class="name">Other: <input  onchange="calculate();" name="otherfood" type="text" value="0" placeholder="" id="otherfood" /></p>
  </p>
  <hr>

    <div class="ease"></div>

</form>

1 个答案:

答案 0 :(得分:1)

你的&lt; a&gt;标签正在重新加载整个页面。为了防止这种情况,请在href属性中添加“#”。像这样:

<a href="#" onclick="tripweight();">[ calculate ] </a>