如何实现点击切换BMI计算器的显示与隐藏状态？

这里提供两种简洁可行的实现方式，直接基于你现有的代码修改：

方案一：CSS类切换（推荐，更易维护） #

这种方式把显示逻辑交给CSS，JS仅负责切换类名，后期修改样式或扩展逻辑更灵活。

实现步骤： #

1. 在HTML中添加用于切换的按钮
2. 定义CSS类控制元素隐藏状态
3. 编写JS逻辑完成类名的切换

修改后的完整代码：

<!-- HTML -->
<button id="toggleMain">切换计算器显示</button>
<main id="main">
    <div class="container">
        <div class="title"> Calculadora - IMC </div>
        <div class="input">
            <label>Nome:</label>
            <input type="text" id='nome'>
        </div>
        <div class="input">
            <label>Altura:</label>
            <input type="number" id='altura'>
        </div>
        <div class="input">
            <label>Peso:</label>
            <input type="number" id='peso'>
        </div>
        <button id='calcular'>Calcular</button>

        <div class="result" id='resultado'></div>
    </div>
</main>

/* CSS */
.hidden {
    display: none;
}

// JavaScript
const toggleBtn = document.getElementById('toggleMain');
const mainElement = document.getElementById('main');

toggleBtn.addEventListener('click', () => {
    mainElement.classList.toggle('hidden');
});

方案二：直接操作style.display（无需额外CSS） #

基于你现有的函数改造，直接通过JS切换元素的行内样式：

修改后的代码：

<!-- HTML -->
<button onclick="toggleMain()">切换计算器显示</button>
<main id="main">
    <!-- 原有内容保持不变 -->
</main>

// JavaScript
function toggleMain() {
    const mainElement = document.getElementById('main');
    // 判断当前显示状态，切换display属性
    mainElement.style.display = mainElement.style.display === 'none' ? 'block' : 'none';
}

补充说明： #

• 方案一中的classList.toggle()方法会自动判断元素是否包含指定类，存在则移除，不存在则添加，是切换场景的最优写法
• 方案二无需额外CSS代码，适合快速实现简单的显示切换需求

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