[英]How can i make my javascript code add the total amount
Hi so i have been working on this code that allows the user to select different radio button options and then gives them the total cost after they select them.嗨,所以我一直在研究这段代码,它允许用户选择不同的单选按钮选项,然后在他们选择后给他们总成本。
This is what i have tried: (html)这是我尝试过的:(html)
Total <input type="text" id="count" value="$0" readonly />
<form action="MAILTO:someone@example.com" method="post" enctype="text/plain">
<h4>Contact plugin</h4>
<input type="radio" name="pak1" class="mnozstvi_sleva" value="4
Qty" onClick="changeText(0)">No
<input type="radio" class="mnozstvi_sleva" onclick="changeText(5)" value="2
Qty" name="PAk1" >Yes!
<h4> Mailing list</h4> <input type="radio" class="mnozstvi_sleva" onclick="changeText2(0)" value="2
Qty" name="PAk21" >No
<input type="radio" class="mnozstvi_sleva" onclick="changeText2(10)" value="2
Qty" name="PAk21" >Yes
`
(javascript) (javascript)
function changeText(value) {
document.getElementById('count').value = 10 * value;
}
function changeText2(value) {
document.getElementById('count').value = 10 * value;
}
So i need this to add together instead of change to one number you can run the code here on jsfiddle: jsfiddle所以我需要把它加在一起而不是改变一个数字你可以在jsfiddle上运行代码: jsfiddle
Guess you need to use handlers for two radios.猜猜您需要为两个无线电使用处理程序。 You are using only for the
Yes
and nothing for the other.您仅用于
Yes
而没有用于其他。 Try something like this:尝试这样的事情:
function updateTotal () { total = 0; total += frm.contact_plugin.value * 10 + frm.mailing_list.value * 10; document.getElementById("total").innerHTML = total; }
* {font-family: Segoe UI;} form ul, form ul li {list-style: none; margin: 0; padding: 0;} form ul li strong, form ul li label {display: inline-block; width: 120px; padding: 3px;} form ul li label {width: 75px;}
<p><strong>Billing</strong></p> <form action="" id="frm"> <ul> <li> <strong>Contact plugin</strong> <label><input type="radio" value="1" name="contact_plugin" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="contact_plugin" onclick="updateTotal()" /> No</label> </li> <li> <strong>Mailing list</strong> <label><input type="radio" value="1" name="mailing_list" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="mailing_list" onclick="updateTotal()" /> No</label> </li> </ul> </form> <p><strong>Total:</strong> <span id="total">0</span>$</p>
For example例如
var cost1 = 0, cost2 = 0;
function changeText(value) {
cost1 = 10 * value;
calculateSum();
}
function changeText2(value) {
cost2 = 10 * value;
calculateSum();
}
function calculateSum() {
document.getElementById('count').value = cost1 + cost2;
}
I suggest more dynamic way: DEMO我建议更动态的方式: DEMO
You should call below method like changeTotal(100, this.name)
.您应该调用以下方法,例如
changeTotal(100, this.name)
。 It doesn't depend parent, so, you can use everywhere, with any tags(not only input) through event它不依赖于父级,因此,您可以在任何地方使用任何标签(不仅是输入)通过事件
var groups = {};
function changeTotal(value, group) {
groups[group.toLowerCase()] = value;//toLowerCase has added for PAk1 and pak1
var sum = 0;
Object.keys(groups).forEach(function (key) {
sum += groups[key]
});
document.getElementById('count').value = "$"+(10 * sum);
}
function updateTotal () { total = 0; total += frm.contact_plugin.value * 10 + frm.mailing_list.value * 10; document.getElementById("total").innerHTML = total; }
* {font-family: Segoe UI;} form ul, form ul li {list-style: none; margin: 0; padding: 0;} form ul li strong, form ul li label {display: inline-block; width: 120px; padding: 3px;} form ul li label {width: 75px;}
<p><strong>Billing</strong></p> <form action="" id="frm"> <ul> <li> <strong>Contact plugin</strong> <label><input type="radio" value="1" name="contact_plugin" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="contact_plugin" onclick="updateTotal()" /> No</label> </li> <li> <strong>Mailing list</strong> <label><input type="radio" value="1" name="mailing_list" onclick="updateTotal()" /> Yes</label> <label><input type="radio" value="0" name="mailing_list" onclick="updateTotal()" /> No</label> </li> </ul> </form> <p><strong>Total:</strong> <span id="total">0</span>$</p>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.