HTML/CSS/JS实现选中Button A/B后永久显示Let's Go按钮

现有showLetsGoBtn使用双向切换逻辑：判断当前「Let's Go!」按钮的display属性值，为none则改为block显示，为block则改回none隐藏，因此每次点击选项按钮都会切换显隐状态。

核心逻辑调整为：触发任意选项按钮点击后，直接将「Let's Go!」按钮设置为显示状态，不再做隐藏判断。两种可选实现：

方案1：最简直接修改 #

替换原函数逻辑，无需额外状态判断，新手可快速上手：

function showLetsGoBtn() {
    const x = document.getElementById("letsGoBtn");
    // 直接设置为显示，不做反向切换
    x.style.display = "block";
}

实现效果：

• 页面初始加载时，按钮保留原有内联样式display: none保持隐藏
• 第一次点击Button A/Button B时，函数执行将按钮设为block完成显示
• 后续再次点击A/B按钮时，函数只是重复设置display: block，不会触发隐藏，满足永久显示需求

方案2：加状态标记减少重复操作 #

如果需要避免重复执行样式设置，可以增加全局状态标记，记录按钮是否已经显示过：

// 全局标记：初始为未显示状态
let goBtnShown = false;

function showLetsGoBtn() {
    // 已经显示过则直接返回，不执行任何操作
    if (goBtnShown) return;

    const x = document.getElementById("letsGoBtn");
    x.style.display = "block";
    // 更新标记为已显示
    goBtnShown = true;
}

• HTML中letsGoBtn的id写法id=letsGoBtn缺少引号，建议改为标准格式id="letsGoBtn"，避免解析兼容问题
• 现有按钮选中高亮依赖:focus伪类，点击页面其他区域后高亮会消失，如果需要固定选中态，可以为选中的选项按钮添加自定义类名控制样式
• 「Let's Go!」按钮的跳转逻辑可以直接绑定在对应元素上，示例：<button onclick="window.location.href='/目标页面'">Let's Go!</button>

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