javascript - 在一个html页面中使用javascript计算2组输入类型

Question

我有两组输入类型的文本框。每个 2 个字段。我正在尝试在单页中单独计算和比较每组。 输入类型有不同的 id。

<input type="text" id="tmcp_textfield_1" name="blueberry" 
placeholder="blueberry" value="0" onkeydown="calculate()" 
onkeyup="calculate()">
<input type="text" id="tmcp_textfield_2" name="plums" placeholder="plums" value="0" 
onkeydown="calculate()" onkeyup="calculate()">
<input type="text" id="a3" name="a3" placeholder="a3" value="0">

<br>second set below<br>
<input type="text" id="tmcp_textfield_3" name="blueberry" 
placeholder="blueberry" value="0" onkeydown="calculate()" 
onkeyup="calculate()">
<input type="text" id="tmcp_textfield_4" name="plums" placeholder="plums" value="0" 
onkeydown="calculate()" onkeyup="calculate()">
<input type="text" id="a3`" name="a3" placeholder="a3" value="0">

我的标题中的 JavaScript: 对于第一组:

<script type="text/javascript">
    calculate = function() {
        var blueb = parseFloat($('#tmcp_textfield_1').val());//document.getElementById('blueberry').value;
        var plumsb = parseFloat($('#tmcp_textfield_2').val());//document.getElementById('plums').value; 
        var thetotal = /*document.getElementById('a3').value =*/ parseInt(blueb)+parseInt(plumsb);
        if (thetotal > 6) {
            $('#tmcp_textfield_2').val('');
            $('#tmcp_textfield_1').val('');
            alert('Combination must be below 6');
        }
    }
</script>

第二组:

<script type="text/javascript">
    calculate = function() {
        var blueb = parseFloat($('#tmcp_textfield_3').val());//document.getElementById('blueberry').value;
        var plumsb = parseFloat($('#tmcp_textfield_4').val());//document.getElementById('plums').value; 
        var thetotal = /*document.getElementById('a3').value =*/ parseInt(blueb)+parseInt(plumsb);

        if (thetotal > 12){
            $('#tmcp_textfield_4').val('');
            $('#tmcp_textfield_3').val('');
            alert('Combination must be below 12');
        }
    }
</script>

本题仅进行第一组计算工作。当我删除第一组 JavaScript 时，第二组只能工作，反之亦然。 我如何区分 javascript 中的集合，以便这两个输入集合在一个 html 页面中一起工作。

Answer 1

问题: 两个集合都有相同名称的函数“calculate()”，这就是为什么一次只有 1 个函数在工作。

解决方案: 将函数名称重命名为不同的名称，例如 calculateOne() 和 calculateTwo()，然后两者都可以工作。

希望这有帮助