如何实现选中带值按钮的数值与独立按钮点击次数的乘积计算？

需求说明 #

有两个带数值的按钮（例如数值为10、100），还有一个独立按钮A，需要统计按钮A的点击次数。选中其中一个带数值的按钮后，计算该按钮的数值与按钮A点击次数的乘积。

现有代码 #

带值按钮相关代码 #

<div id="container">
    <button class="buttonbetbox" id="10" onclick="reply_click(this.id)"></button>
</div>

<script>
function reply_click(id) {}
</script>

按钮A点击统计代码 #

<button class="buttoncrab" id="btncrab" onclick="myFunction()"></button>

<script>
function myFunction() {
    count++;
}
</script>

完整实现方案 #

在现有代码基础上补充几个关键逻辑即可完成需求：

1. 定义全局变量：用来存储选中的数值和按钮A的点击次数，确保不同函数之间能共享数据
2. 完善选中按钮逻辑：把点击的按钮ID转为数值保存，同时给选中按钮加样式方便用户识别
3. 完善点击次数统计：初始化count变量，添加实时显示点击次数的元素
4. 添加计算逻辑：在选中按钮或点击按钮A时自动计算乘积并展示结果

完整代码示例 #

<!-- HTML部分 -->
<div id="container">
    <!-- 给按钮添加显示文本，方便用户识别数值 -->
    <button class="buttonbetbox" id="10" onclick="reply_click(this.id)">10</button>
    <button class="buttonbetbox" id="100" onclick="reply_click(this.id)">100</button>
</div>

<button class="buttoncrab" id="btncrab" onclick="myFunction()">按钮A</button>

<!-- 用于展示点击次数和计算结果 -->
<div>按钮A点击次数：<span id="countDisplay">0</span></div>
<div>乘积结果：<span id="resultDisplay">0</span></div>

<script>
// 全局变量：存储选中的数值和按钮A的点击次数
let selectedValue = 0;
let count = 0;

// 选中带值按钮的处理函数
function reply_click(id) {
    // 将按钮ID转为数值，存入全局变量
    selectedValue = parseInt(id);
    
    // 给选中按钮添加样式（可选，提升用户体验）
    document.querySelectorAll('.buttonbetbox').forEach(btn => {
        btn.classList.remove('selected');
    });
    document.getElementById(id).classList.add('selected');
    
    // 自动计算并更新结果
    calculateResult();
}

// 按钮A的点击统计函数
function myFunction() {
    count++;
    // 更新页面上的点击次数显示
    document.getElementById('countDisplay').textContent = count;
    // 若已选中带值按钮，自动更新乘积结果
    calculateResult();
}

// 计算乘积的函数
function calculateResult() {
    const result = selectedValue * count;
    document.getElementById('resultDisplay').textContent = result;
}
</script>

<style>
/* 选中按钮的样式，可选 */
.buttonbetbox.selected {
    background-color: #4CAF50;
    color: white;
}
</style>

核心逻辑说明 #

• 点击带数值按钮时，会把对应数值存入全局变量，同时标记选中状态，并自动计算乘积结果
• 每次点击按钮A，次数会累加，若已选中带数值按钮，会实时更新乘积结果
• 页面上实时展示点击次数和计算结果，用户能直观看到状态变化

内容的提问来源于stack exchange，提问作者kennedyforf