如何实现多按钮点击显示对应内容？是否需单独编写计算函数？

首先，关于点击按钮显示对应内容：你需要先给square和rectangle两个区域设置默认隐藏，再给按钮绑定点击事件，点击时切换对应区域的显示状态。

然后是数值计算的部分：必须编写单独的计算函数，因为正方形和长方形的面积计算逻辑完全不同，你当前代码里两个计算按钮都用了同一个aarea()函数，会直接导致逻辑混乱、计算结果出错。

下面是完整的实现代码，包含显示/隐藏逻辑和独立的计算函数：

<div>
    <h1 id="one">Shapes</h1>
    <button id="one1">Square</button>
    <button id="one2">Rectangle</button>
</div>

<div id="square" style="display: none;">
    <h3>Square</h3>
    <img src="" alt="Square" height="100" width="100" />
    边长: <input id="squareSide" type="number">
    <button onclick="calculateSquareArea()">Calculate</button>
    <p>面积结果: <span id="squareResult"></span></p>
</div>

<div id="rectangle" style="display: none;">
    <h3>Rectangle</h3>
    <img src="" alt="Rectangle" height="80" width="120" />
    长: <input id="rectLength" type="number">
    宽: <input id="rectWidth" type="number">
    <button onclick="calculateRectangleArea()">Calculate</button>
    <p>面积结果: <span id="rectResult"></span></p>
</div>

<script>
// 点击Square按钮显示正方形区域，隐藏长方形
document.getElementById('one1').addEventListener('click', function() {
    document.getElementById('square').style.display = 'block';
    document.getElementById('rectangle').style.display = 'none';
});

// 点击Rectangle按钮显示长方形区域，隐藏正方形
document.getElementById('one2').addEventListener('click', function() {
    document.getElementById('rectangle').style.display = 'block';
    document.getElementById('square').style.display = 'none';
});

// 单独的正方形面积计算函数
function calculateSquareArea() {
    const side = parseFloat(document.getElementById('squareSide').value);
    if (!isNaN(side) && side > 0) {
        const area = side * side;
        document.getElementById('squareResult').textContent = area;
    } else {
        document.getElementById('squareResult').textContent = '请输入有效正数';
    }
}

// 单独的长方形面积计算函数
function calculateRectangleArea() {
    const length = parseFloat(document.getElementById('rectLength').value);
    const width = parseFloat(document.getElementById('rectWidth').value);
    if (!isNaN(length) && length > 0 && !isNaN(width) && width > 0) {
        const area = length * width;
        document.getElementById('rectResult').textContent = area;
    } else {
        document.getElementById('rectResult').textContent = '请输入有效正数';
    }
}
</script>

核心细节说明 #

• 默认隐藏两个形状区域，避免页面加载时内容重叠混乱。
• 给两个计算按钮分配独立函数，分别处理不同形状的计算逻辑，避免冲突。
• 增加了数值有效性判断，防止输入非数字或负数出现错误结果。

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