gpt4 book ai didi

javascript - 使用按钮计算表单的值

转载 作者:行者123 更新时间:2023-12-03 01:51:55 25 4
gpt4 key购买 nike

作为我的第一个项目,我正在制作一个表格,通过使用选定的表格“type='radio'”来计算“资金带”。我想做的是在选择“购买”按钮时获取选定的输入并计算它们。我想需要一个函数才能实现这一点,我只是不知道从哪里开始以及如何将这些值实现到这个计算中。我唯一知道的是数学应该是“(面额*带)*倍”。任何可以开始的地方将不胜感激。提前致谢,如果我说得不够具体,抱歉,但我希望我想要做的事情能够被理解。截至目前,我还没有编写 JavaScript,只是 HTML 设置。

<html>

<head>
<h1 id='header'>
<b>BUY MONEY</b>
</h1>
</head>

<body id='body'>

<form id='strapDenom'>
<p id='p1'>
<b>DENOMINATION</b>
</p>
<input type='radio' name='denom' value='100' checked> 1's<br>
<input type='radio' name='denom' value='200'> 2's<br>
<input type='radio' name='denom' value='500'> 5's<br>
<input type='radio' name='denom' value='1000'> 10's<br>
<input type='radio' name='denom' value='2000'> 20's<br>
<input type='radio' name='denom' value='1000'> 50's<br>
<input type='radio' name='denom' value='1000'> 100's<br>
</form>

<form id='strapCount'>
<p id='p2'>
<b>STRAP COUNT</b>
</p>
<input type='radio' name='strap' value='1' checked> 1<br>
<input type='radio' name='strap' value='2'> 2<br>
<input type='radio' name='strap' value='3'> 3<br>
<input type='radio' name='strap' value='4'> 4<br>
<input type='radio' name='strap' value='5'> 5<br>
<input type='radio' name='strap' value='6'> 6<br>
<input type='radio' name='strap' value='7'> 7<br>
<input type='radio' name='strap' value='8'> 8<br>
<input type='radio' name='strap' value='9'> 9<br>
<input type='radio' name='strap' value='10'> 10<br>
</form>

<form id='multiply'>
<p id='p3'>
<b>MULTIPLE</b>
</p>
<input type='radio' name='times' value='1' checked> 1<br>
<input type='radio' name='times' value='2'> 2<br>
<input type='radio' name='times' value='3'> 3<br>
<input type='radio' name='times' value='4'> 4<br>
<input type='radio' name='times' value='5'> 5<br>
<input type='radio' name='times' value='6'> 6<br>
<input type='radio' name='times' value='7'> 7<br>
<input type='radio' name='times' value='8'> 8<br>
<input type='radio' name='times' value='9'> 9<br>
<input type='radio' name='times' value='10'> 10<br>
</form>

<br>

<button id='buy' onclick=''>BUY</button>
</body>

</html>

我会用这样的东西吗?

function buyMoney() {
var den = document.getElementById('denom').value;
var str = document.getElementById('strap').value;
var tim = document.getElementById('times').value;
document.getElementById('buy').innerHTML = den * str * tim;
}

最佳答案

尝试使用以下解决方案,

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id='header'>
<b>BUY MONEY</b>
</h1>
<script>
function calculate() {
var denom = $("input[name='denom']:checked").val();
var strap = $("input[name='strap']:checked").val();
var times = $("input[name='times']:checked").val();
var finalPrice = (denom * strap) * times;
$("#iblFinalPrice").html(finalPrice);
}
</script>
</head>

<body id='body'>
<form id='strapDenom'>
<p id='p1'>
<b>DENOMINATION</b>
</p>
<input type='radio' name='denom' value='100' checked> 1's<br>
<input type='radio' name='denom' value='200'> 2's<br>
<input type='radio' name='denom' value='500'> 5's<br>
<input type='radio' name='denom' value='1000'> 10's<br>
<input type='radio' name='denom' value='2000'> 20's<br>
<input type='radio' name='denom' value='1000'> 50's<br>
<input type='radio' name='denom' value='1000'> 100's<br>
</form>
<form id='strapCount'>
<p id='p2'>
<b>STRAP COUNT</b>
</p>
<input type='radio' name='strap' value='1' checked> 1<br>
<input type='radio' name='strap' value='2'> 2<br>
<input type='radio' name='strap' value='3'> 3<br>
<input type='radio' name='strap' value='4'> 4<br>
<input type='radio' name='strap' value='5'> 5<br>
<input type='radio' name='strap' value='6'> 6<br>
<input type='radio' name='strap' value='7'> 7<br>
<input type='radio' name='strap' value='8'> 8<br>
<input type='radio' name='strap' value='9'> 9<br>
<input type='radio' name='strap' value='10'> 10<br>
</form>
<form id='multiply'>
<p id='p3'>
<b>MULTIPLE</b>
</p>
<input type='radio' name='times' value='1' checked> 1<br>
<input type='radio' name='times' value='2'> 2<br>
<input type='radio' name='times' value='3'> 3<br>
<input type='radio' name='times' value='4'> 4<br>
<input type='radio' name='times' value='5'> 5<br>
<input type='radio' name='times' value='6'> 6<br>
<input type='radio' name='times' value='7'> 7<br>
<input type='radio' name='times' value='8'> 8<br>
<input type='radio' name='times' value='9'> 9<br>
<input type='radio' name='times' value='10'> 10<br>
</form>
<br>
<div> <b>Total Price :</b> <label id="iblFinalPrice"></label></div>
<br>
<button id='buy' onclick='calculate()'>BUY</button>
</body>

</html>

关于javascript - 使用按钮计算表单的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50383268/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com