-2

我有一个由这段代码表示的单选按钮列表：

<form id="menu4strombolis">
    input1 <input type="radio" name="menu1"><br />
    input2 <input type="radio" name="menu2"><br />
    input3 <input type="radio" name="menu3"><br />
    input4 <input type="radio" name="menu4"><br />
    input5 <input type="radio" name="menu5"><br />
    input6 <input type="radio" name="menu6"><br />
    input7 <input type="radio" name="menu7"><br />
</form>

Whenever a button is selected I need the subtotal and total to be updated.

这就是我想要的样子。

Subtotal: <br />
Tax:<br />
Total:<br />

税收总是 %7 或 .7

菜单 1 到 7 的价格增加了 5 美元。Menu1 是 5 美元，menu2 是 10 美元，以此类推。

我试图找出 JavaScript 来解决这个问题，但问题是我不希望它在我希望它显示在页面底部的按钮之后立即显示。
如果我这样做document.write，整个页面都会被覆盖。请在这个问题上帮助我。我相信这真的很简单。

4

3 回答 3

7

前言

这对我来说听起来像是家庭作业。但是，我发现最好的学习方式是通过例子。
所以这是我，以身作则，好吗？

你没有给我太多继续，所以为了这个例子，我假设你有一个复选框或单选按钮的列表，上面写着Menu 1... Menu n。选中的每个复选框都将添加到小计中，然后在此基础上计算税款。
使用单选按钮更容易一些，所以我也添加了该示例。

文章底部是未来研究本示例中使用的内容的参考资料。如果您还有其他问题，请在本文底部的评论区提问。

Javascript（复选框）| JSFiddle 示例（查看实际操作）

//Set the tax and base cost
var f_tax = 0.07,
    i_menu_base = 5;

//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
    e_checkboxes = e_menu.getElementsByTagName("input"),
    e_subtotal = document.getElementById("sub_total");

// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_checkboxes.length; i++){
    e_checkboxes[i].onchange = function(){
        //Recalculate subtotal
        get_subtotal();
    }
}

//get_subtotal calculates the subtotal based on which checkboxes are checked
function get_subtotal(){
    var f_sub_total = 0.0,
        f_grand_total = 0.0;

    var subtotal, tax, grandtotal;

    for(var i = 1; i <= e_checkboxes.length; i++){
        //If the checkbox is checked, add it to the total
        if(e_checkboxes[i-1].checked){
            f_sub_total += i * i_menu_base;
        }
    }

    //Calculate the grand total
    f_grand_total = f_sub_total*(1+f_tax);

    //Format them
    subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
    tax = (Math.round(f_tax*10000)/100).toFixed(2);
    grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);

    //Add them to the display element
    e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
    e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
    e_subtotal.innerHTML += "Total: "+grandtotal;
}

Javascript（单选按钮）| JSFiddle 示例（查看实际操作）

//Set the tax
var f_tax = 0.07,
    i_menu_base = 5;

//Declare all the variables that will be used
var e_menu = document.getElementById("menu"),
    e_radios = e_menu.getElementsByTagName("input"),
    e_subtotal = document.getElementById("sub_total");

// Add event listeners for when any checkbox changes value
for(var i = 0; i < e_radios.length; i++){
    e_radios[i].onchange = function(){
        //Recalculate subtotal
        get_subtotal(this);
    }
}

//get_index gets the index of the element (1..n)
function get_index(element){
    for(var i = 1; i <= e_radios.length; i++){
        if(e_radios[i-1] == element){
            return i;
        }
    }
}

//get_subtotal calculates the subtotal based on the radio that was changed
function get_subtotal(el){
    var f_sub_total = 0.0,
        f_grand_total = 0.0;

    var subtotal, tax, grandtotal;

    f_sub_total += get_index(el) * i_menu_base

    //Calculate the grand total
    f_grand_total = f_sub_total*(1+f_tax);

    //Format them
    subtotal = (Math.round(f_sub_total*100)/100).toFixed(2);
    tax = (Math.round(f_tax*10000)/100).toFixed(2);
    grandtotal = (Math.round(f_grand_total*100)/100).toFixed(2);

    //Add them to the element
    e_subtotal.innerHTML = "Subtotal: "+subtotal+"<br />";
    e_subtotal.innerHTML += "Tax: "+tax+"%<br />";
    e_subtotal.innerHTML += "Total: "+grandtotal;
}

未来研究的参考资料

按它们出现的顺序

于 2013-02-22T17:45:29.780 回答
1

尽管你有任何额外的意见，以及我更好的判断，我还是很无聊，所以我做了这一切。

HTML：

<form id="menu4strombolis">input1
    <input type="radio" name="menu1" value="5">
    <br>input2
    <input type="radio" name="menu2" value="10">
    <br>input3
    <input type="radio" name="menu3" value="15">
    <br>input4
    <input type="radio" name="menu4" value="20">
    <br>input5
    <input type="radio" name="menu5" value="25">
    <br>input6
    <input type="radio" name="menu6" value="30">
    <br>input7
    <input type="radio" name="menu7" value="35">
    <br>
</form>
<button id="getTotal">Total</button>
<div id="subtotal">Sub-Total:</div>
<div id="tax">Tax:</div>
<div id="total">Total:</div>

JS：

var button = document.getElementById("getTotal");

button.onclick = function () {
    var subtotalField = document.getElementById("subtotal");
    var radios = document.forms["menu4strombolis"].getElementsByTagName("input");
    var subtotal = 0;
    var tax = 0;
    var total = 0;

    for (var i = 0, length = radios.length; i < length; i++) {
        if (radios[i].checked) {
            subtotal += parseInt(radios[i].value);
        }
    }

    tax = (subtotal * .07).toFixed(2); ;
    total = subtotal + tax;

    document.getElementById("subtotal").innerHTML = "Sub-Total: $" + subtotal;
    document.getElementById("tax").innerHTML = "Tax: $" + tax;
    document.getElementById("total").innerHTML = "Total: $" + total;
};

和工作小提琴：

http://jsfiddle.net/RGvTt/1/

虽然在旁注中，您应该将一些收音机组合在同一组中......或将它们设为复选框。

更新以修复 OP 无法修复的错误：

http://jsfiddle.net/RGvTt/4/

需要使用 parseFloat。

iPhone小提琴编程FTW！

于 2013-02-22T17:18:56.880 回答
0

你想要的是element.innerHTML

所以它看起来像这样：

<form id="menu4strombolis">
    input1 <input type="radio" name="menu1"><br />
    input2 <input type="radio" name="menu2"><br />
    input3 <input type="radio" name="menu3"><br />
    input4 <input type="radio" name="menu4"><br />
    input5 <input type="radio" name="menu5"><br />
    input6 <input type="radio" name="menu6"><br />
    input7 <input type="radio" name="menu7"><br />
</form>

 ..... ..html stuff here

 Subtotal: <span id="subtotal"></span><br/>
 Tax: <span id="tax"></span><br/>
 Total: <span id="total"></span><br/>
 ETC...

 <script>
      var subtotal = //whatever menu item is checked then .value();
      var span_subtotal = document.getElementById("subtotal);
      var tax = document.getElementById("tax");
      var total = document.getElementById("total");
      var the_tax = subtotal * .07;

      span_subtotal.innerHTML = subtotal;
      tax.innerHTML = the_tax;
      total.innerHTML = subtotal + the_tax;
 <script>
于 2013-02-22T17:22:19.057 回答