简单的覆盖计算器不会在点击时开火，没有错误.jQuery和js

Simple mulch caculator won't fire on click and no error. jQuery and straigt js

本文关键字：开火 有错误 jQuery js 计算器 覆盖 简单      更新时间：2023-09-26

我正在尝试用jQuery将一个直接的javascript函数转换为fire .click

我没有得到任何输出错误，但它不会在jsfiddle上执行计算。

var form = document.product_form_top;
function process(v) {
  var value = parseInt(document.getElementById('item_qty').value);
  value += v;
  document.getElementById('item_qty').value = value.toFixed(0);
}
    function calculate() {
      form.cubicYards.value = (form.length.value / 3) * (form.width.value / 3) * (form.depth.value / 35);
      document.getElementById('yards').innerHTML = finaloutput
      var number = parseFloat(form.item_qty.value);
      var finaloutput = number.toFixed(0);
      form.item_qty.value = form.cubicYards.value * 14.7; //calculate yards
      var number = parseFloat(form.cubicYards.value);
      var finaloutput = number.toFixed(0);
      document.getElementById('item_qty').innerHTML = finaloutput
      form.weightPounds.value = (form.length.value / 3) * (form.width.value / 3) * (form.depth.value * 21);
      form.weightPounds.value * 700;
      var number = parseFloat(form.weightPounds.value);
      var finaloutput = number.toFixed(0)
      document.getElementById('pounds').innerHTML = finaloutput
    }

这是一个jsfiddle http://jsfiddle.net/4L4St/8/

使用onclick="calculate();在一个按钮上运行该功能。我宁愿使用jQuery的。click函数来触发它。

http://spartonenterprises.com/store/playground-mulch

另外，我使用toFixed(0)来删除额外的小数点，当使用firebug进行检查时，它似乎可以工作，但是可见的html显示了小数点。很奇怪吗?

我在这里编辑你的小提琴:http://jsfiddle.net/4L4St/5/，作为一个例子;你有一些基本的错误，但是有了这个例子，你现在可以再试一次了。

我这样编辑你的html:

<div class="control-group clearfix">
<div class="rubber-nugget-calc">
    <label class="control-label" for="item_qty">
            <h2>Calculate Bags</h2>
    </label>
    <div class="clear"></div>Length:
    <input type="text" name="length" size="3" class="sidebarinput" />(feet) Width:
    <input type="text" name="width" size="3" class="sidebarinput" />(feet)
    <br/>Depth:
    <select class="depthselect" name="depth">
        <option value="">Please Select One</option>
        <option value="1">1 inch</option>
        <option value="2">2 inches</option>
        <option value="3">3 inches</option>
        <option value="4">4 inches</option>
        <option value="5">5 inches</option>
        <option value="6">6 inches</option>
        <option value="7">7 inches</option>
        <option value="8">8 inches</option>
        <option value="9">9 inches</option>
    </select>
    <!--Calculate Button -->
    <button class="calculate" type="button" style="float:right;" class="button">Calculate Bags Needed</button>
    <!--Results-->
    <p>You will need approximately:</p>
    <div class="calc-results">
        <div id="yards" style="display:none;">  <span> (results) </span>
        </div>  <span class="mulchspan" style="display:none;"> Total cubic yards of mulch </span>
        <input type="text" id = "cubicYards" name="cubicYards" size="2" class="sidebarresult" value="" />
        <div class="clear"></div>
        <div id="pounds" style="display:none;"> <span style=""> (results) </span>
        </div>  <span class="mulchspan" style="display:none;"> Pounds of mulch (*For bulk delivery) </span>
        <input type="text" name="weightPounds" size="6" class="sidebarresult" />
    </div>
    <label class="control-label" for="item_qty">Approximate Bags Needed</label>
    <br/>
    <br/>   <small>*Note - Round up by one bag to ensure coverage / You may use the calculator or manually enter the amount.</small>
    <div class="controls">
        <div class="button-div">
            <input type="text" id="item_qty" name="item_qty" class="input-mini" value="" />
        </div>
    </div>
</div>
</div>

你的函数是这样的:

$(".calculate").click(function () {
alert('sdfasgg');    
document.getElementById('cubicYards').value = 12;
document.getElementById('yards').style.display="";
document.getElementById('yards').innerHTML = 25;
document.getElementById('item_qty').value = 26;
document.getElementById('pounds').style.display="";    
document.getElementById('pounds').innerHTML = 27;
});

------------------------------- 更新 ---------------------------------------

这是最后的小提琴http://jsfiddle.net/4L4St/13/

带有固定小数

它不计算，但现在你可以使所有的计算在最好的方式;

用....包起来

$(document).ready(function() {
    //Code here
});

和

你只是定义你的函数....你需要把它命名为calculate()

和

你的表单在哪里?你的代码引用了product_form_top，但我在你的html中没有看到这样的内容

相关文章：