0

我正在尝试将直接的 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 显示小数点。奇怪的？

4

2 回答 2

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/

使用 fixex 小数

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

于 2013-04-04T23:35:18.410 回答
0

全部包起来......

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

});

和

您只是在定义您的功能....您需要调用它，calculate()

和

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

于 2013-04-04T22:59:16.523 回答