如何实现点击按钮增加进度条功能？（虚拟宠物项目）

需求说明 #

点击对应按钮时，对应进度条增长：

• 点击Clean按钮，健康值进度条增加
• 点击Feed按钮，饥饿值进度条增加（注：原按钮类名fead为拼写错误，建议改为feed）
• 点击Play按钮，幸福值进度条增加

原代码问题分析 #

1. DOM元素ID拼写错误：myHappines应为myHappiness
2. 逻辑错误：每次点击先将进度条宽度重置为0，无法实现增长效果
3. 语法错误：直接使用百分比字符串进行数值比较，且else语句括号不匹配
4. 按钮与进度条对应关系错误：Clean按钮绑定了幸福值进度条，而非健康值

修正后的代码 #

JavaScript代码 #

// 获取按钮元素
const cleanBtn = document.querySelector(".clean");
const feedBtn = document.querySelector(".feed"); // 修正原类名fead为feed
const playBtn = document.querySelector(".play");

// 封装进度条增长函数，复用逻辑
function increaseProgress(progressBarId, step = 10) {
    const progressBar = document.getElementById(progressBarId);
    // 将当前宽度字符串转为数字（默认初始宽度为0）
    let currentWidth = parseInt(progressBar.style.width) || 0;
    // 计算新宽度，超过100%则设为100%
    let newWidth = Math.min(currentWidth + step, 100);
    progressBar.style.width = `${newWidth}%`;
}

// 绑定按钮点击事件
cleanBtn.addEventListener("click", () => {
    increaseProgress("myHealth");
});

feedBtn.addEventListener("click", () => {
    increaseProgress("myHunger");
});

playBtn.addEventListener("click", () => {
    increaseProgress("myHappiness");
});

HTML代码（修正按钮类名拼写） #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Virtual Pet</title>
    <!--font-awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" />
    <!--styles-->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    
    <div class="sections-container">
        <div class="section1">
            <div class="pet-info">
                <ul>
                    <div id="basic">
                        <ul>Name: Elis</ul>
                        <ul>Age: 2 months</ul>
                    </div>
                    <div class="health">Health
                        <div id="myProgressHealth">
                            <div id="myHealth"></div>
                        </div>
                       
                    </div>
                    <div class="hunger">Hunger
                        <div id="myProgressHunger">
                            <div id="myHunger"></div>
                        </div>
                    </div>
                    
                    <div class="happiness">Happiness
                        <div id="myProgressHappiness">
                            <div id="myHappiness"></div>
                        </div>
                    </div>
                </ul>
            </div>
            <button class="btn-settings">Settings</button>
        </div>
            <div class="section2"> 
                <div class="pet-interactions">
                    <ul>
                    <button class="clean">Clean</button>
                    <button class="feed">Feed</button> <!-- 修正fead为feed -->
                    <button class="play">Play</button>
                    </ul>
                </div>
                <div class="game-control">
                    <li id="name-input">Pet Name <input type="text"></input></li>
                    <li>Game reset button <button class="btn">Reset</button></li>
                </div>
                <div class="end-game-message">
                    <p>Goodbye</p>
                </div>
            </div>
            
    </div>
   
    <!--javascript-->
    <script src="app.js"></script>
</body>
</html>

基础CSS样式（styles.css） #

/* 进度条容器通用样式 */
#myProgressHealth, #myProgressHunger, #myProgressHappiness {
    width: 100%;
    height: 20px;
    background-color: #f0f0f0;
    border-radius: 10px;
    margin: 5px 0;
}

/* 进度条填充通用样式 */
#myHealth, #myHunger, #myHappiness {
    height: 100%;
    width: 0%;
    border-radius: 10px;
    transition: width 0.3s ease; /* 添加过渡动画，提升交互体验 */
}

/* 不同进度条区分颜色 */
#myHealth {
    background-color: #4CAF50; /* 健康值：绿色 */
}

#myHunger {
    background-color: #FF9800; /* 饥饿值：橙色 */
}

#myHappiness {
    background-color: #2196F3; /* 幸福值：蓝色 */
}

/* 交互按钮样式优化 */
.pet-interactions button {
    padding: 8px 16px;
    margin: 0 8px;
    cursor: pointer;
    border: none;
    border-radius: 4px;
    background-color: #e0e0e0;
    font-size: 14px;
}

.pet-interactions button:hover {
    background-color: #bdbdbd;
}

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