Javascript 简易覆盖物计算器won'；t单击即启动，无错误。jQuery和straigt js

我正在尝试将一个直接的JavaScript函数转换为使用jQuery启动。单击

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

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
    }

这是一个JSFIDLE

这是一个使用onclick=“calculate（）；在按钮上运行函数的工作版本。我更愿意使用jQuery的。单击函数启动它

另外，我正在使用toFixed（0）删除额外的小数点，它在使用firebug进行检查时似乎可以工作，但可见的html显示小数点。奇怪吗？

将其全部封装在

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

});

及

您只是在定义函数……您需要调用它，

calculate（）

及

你的表单在哪里？你的代码引用了

product\u form\u top

，但我在你的html中没有看到类似的内容。

我在这里编辑你的小提琴：，作为一个例子；你有一些基本的错误，但在这个例子中，你现在可以再试一次

我通过以下方式编辑您的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（）{

及其对应的

}

-该函数从未被调用；您需要将该函数的内容直接放入传递给

的匿名函数中。单击（）

。然后，当您单击此处所示的按钮时，代码将运行：您可以开始修复控制台中出现的实际错误（如

未捕获类型错误：无法读取未定义的属性“cubicYards”

）。在JSFIDLE代码中，您在单击事件中定义了一个函数，然后在其中定义了另一个函数，而您在代码中不调用它，请使用$（document）.ready（function（）{}）并修复您的代码OK，我将其添加到nnnnnn的FIDLE中，这是一个工作编辑。就toFixed（0）而言，我做错了什么是的。innerHTML不适用于输入吗？innerHTML适用于像div这样的标记…对于输入，你有值…我看到了小提琴，看起来很好…你现在有什么错误？我不一定会收到错误，我想删除输入中额外的小数。我可以将.innerHTML更改为.value吗？这是另一个显示ou的小提琴t但你可以看到它确实删除了html中的小数，但没有删除输入。我用更正的小提琴更新了我的答案，请阅读更新的部分…..saludos

$(".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;
});