简单的覆盖计算器不会在点击时触发，也不会出错。 jQuery 和 straigt js答案

【问题标题】：Simple mulch caculator won't fire on click and no error. jQuery and straigt js简单的覆盖计算器不会在点击时触发，也不会出错。 jQuery 和 straigt js
【发布时间】：2013-04-04 22:56:30
【问题描述】：

我正在尝试将直接的 javacript 函数转换为使用 jQuery .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 显示小数点。奇怪的？

【问题讨论】：

您真的需要花一些时间在DRYing 上编写该代码。它会帮助你和每个想要回答的人。看看一个简单的改变可以对你的代码的可读性做些什么：gist.github.com/elclanrs/5315134。加上适当的缩进和间距。
谢谢。我会尝试更好地格式化它。
删除行function calculate() {及其对应的} - 该函数永远不会被调用；您需要将该函数的内容直接放在传递给.click() 的匿名函数中。然后，当您单击此处显示的按钮时，您的代码将运行：jsfiddle.net/nnnnnn/4L4St/2，您可以开始修复控制台中出现的实际错误（如Uncaught TypeError: Cannot read property 'cubicYards' of undefined）。
在您的 jsfiddle 代码中，您在 click 事件中定义了一个函数，然后在其中定义了另一个函数，并且您不在代码中调用它，使用 $(document).ready(function() {}) 和修复你的代码

标签： javascript jquery innerhtml

【解决方案1】：

我在这里编辑你的小提琴：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/

带固定小数

它不会计算，但现在您可以以最佳方式进行所有计算；以工作代码为例。

【讨论】：

好的，我添加到 nnnnnn 的小提琴中，这是一个有效的编辑。 jsfiddle.net/4L4St/9 就 toFixed(0) 而言，我做错了什么。 innerHTML 不能与输入一起使用吗？
innerHTML 用于 div 之类的标签...对于输入，您有价值....我看到了小提琴，看起来很好...您现在有什么错误？？
我不一定会出错，我想删除输入中多余的小数。我可以将 .innerHTML 更改为 .value 吗？
这是另一个显示输出的小提琴 jsfiddle.net/4L4St/14 您可以看到它确实删除了 html 中的小数，但没有删除输入。
我用更正的小提琴更新了我的答案，请阅读更新的部分.....saludos

【解决方案2】：

把它全部包起来……

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

});

与

你只是在定义你的函数......你需要调用它，calculate()

与

你的表格在哪里？您的代码引用了product_form_top，但我在您的 html 中没有看到类似的内容。

【讨论】：