Блог

ОЧЕНЬ простой калькулятор javascript на http://trailmeister.com/calculator.html Функция «Рассчитать» выполняется при любом изменении ввода переменной, а ссылка «Рассчитать» запускает простую функцию, которая заполняет значение элемента формы «tripweight» произвольным значением (на данный момент) — он начинает работать, а затем сразу возвращается к пустому… идеи?

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>
  

Ваш тег <a> перезагружает всю страницу. Чтобы предотвратить это, добавьте «#» к атрибуту href. Вот так:

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