时间戳

首页 > 解决方案 > 计算按钮问题，html和javascript

javascript - 计算按钮问题，html和javascript

问题描述

我只是改变了我的问题来展示我的尝试。这就是我想要做的。XPlevels 有一个设定值，使用它我想计算并显示价格

function setprice() {    
    var val;    
    var type = document.getElementByName("XP")
    if (type[0].checked)
    {
        var val = 200;
    }
    else if (type[1].checked)
    {
        var val = 150;
    }
    else if (type[2].checked)
    {
        var val = 100;
    }
}

function Calculate() {
    var FName = document.getElementById("FName");
    var numppl = document.getElementById("numppl");
    var Tprice = val * numppl;
    window.alert(FName + ", the membership amount is: R " + BasePrice);

<input type="radio" name="XP" value="Novice" onclick="setprice" />Novice
<input type="radio" name="XP" value="Intermediate"  onclick="setprice" />Intermediate
<input type="radio" name="XP" value="Expert"  onclick="setprice" />Expert

<label for="Members">Number of members</label>
<input id="numppl" type="number" name="Members" size="2" />

<input type="button" value="Calculate fee" onclick="Calculate"/>

标签： javascripthtmldomradio-button

解决方案

这是您的 JS 代码的编辑

function setprice() {
    var type = document.querySelectorAll('[name="XP"]'); 
    if (type[0].checked) {
        var val = 200;
    }
    else if (type[1].checked) {
        var val = 150;
    }
    else if (type[2].checked) {
        var val = 100;
    }

    return val;
}

function calculate() {
    var fName = document.getElementById("FName");
    var numppl = document.getElementById("numppl");
    var val = setprice();
    var tprice = val * numppl.value;
    // window.alert(FName + ", the membership amount is: R " + BasePrice);
    console.log(tprice);
}
<input type="radio" name="XP" value="Novice" onclick="setprice" />Novice
<input type="radio" name="XP" value="Intermediate" onclick="setprice" />Intermediate
<input type="radio" name="XP" value="Expert" onclick="setprice" />Expert

<label for="Members">Number of members</label>
<input id="numppl" type="number" name="Members" size="2" />

<input type="button" value="Calculate fee" onclick="calculate()" />

这个例子是你想要的更正确的方法

在每个单选按钮上，值是要计算的数字（单价）。我添加了一个data属性来获取“类型”

必须将命名的输入member设置为最小值，以便用户无法设置负值。

试试这个代码，如果你有任何问题，我会补充我的答案！

var radio = document.querySelectorAll('.radio');
var number = document.querySelector('.number');
var button = document.querySelector('.button');
var getval;
var datainf;

button.addEventListener('click', function () {
    radio.forEach(function (el) {
        if (el.checked) {
            getval = +el.value;
            datainf = el.getAttribute('data');
        }
    });

    var result = getval * number.value;
    console.log( 'Quantity: ' + number.value + ' / Type: ' + datainf + ' / The membership amount is: ' + result);
});
<input type="radio" class="radio" name="XP" value="200" data="Novice" />Novice
<input type="radio" class="radio" name="XP" value="150" data="Intermediate" checked />Intermediate
<input type="radio" class="radio" name="XP" value="100" data="Expert" />Expert
<br />

<label for="Members">Number of members</label>
<input type="number" class="number" name="Members" size="2" value="1" min="1" />

<input type="button" class="button" value="Calculate fee" />

推荐阅读