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>
答案 0 :(得分:1)
你的&lt; a&gt;标签正在重新加载整个页面。为了防止这种情况,请在href属性中添加“#”。像这样:
<a href="#" onclick="tripweight();">[ calculate ] </a>