前端新手求助：JS修改按钮innerHTML不生效及CSS优化建议

核心问题分析 #

1. 事件选择错误：你用了onfocus事件，这个事件是元素获取键盘焦点时触发，并非鼠标悬停触发。要实现鼠标移上去显示简介，应该用onmouseover（悬停时）和onmouseout（离开时）事件。
2. innerHTML替换丢失内容：原按钮包含文本和图片，直接用innerHTML = "Test1"会把图片也替换掉，需要保留图片或重新写入到innerHTML中。
3. 缺少恢复逻辑：悬停后没有恢复原始文本的逻辑，鼠标移开后按钮内容无法变回初始状态。

修改后的完整代码 #

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">
    <link rel="stylesheet" href="styles.css">
    <title>Tomoko Game</title>
</head>
<body>
    <h1 class="header">Choose your Tomoko </h1>
    <button onclick="NewPagePo()" onmouseover="ShowPoDesc()" onmouseout="RestorePoText()" id="ButtonRehanPo">Tomoko Polite <img id="TomoPicL" src="photos/20221109_054642.jpg" alt="Dog"></button>
    <button onclick="NewPageDa()" onmouseover="ShowDaDesc()" onmouseout="RestoreDaText()" id="ButtonRehanDa">Tomoko Dangerous <img id="TomoPicR" src="photos/CIMG0093.JPG" alt="Dog"></button>
    <button onclick="NewPageAll()" onmouseover="ShowAllDesc()" onmouseout="RestoreAllText()" id="ButtonRehanAll">Tomoko All-Rounder <img id="TomoPicM" src="photos/20211214_192451.jpg" alt="Dog"></button>
    <p id="p1">Hi</p>
    <!-- 把script移到body末尾，确保DOM加载完成后再执行 -->
    <script src="main.js"></script>
</body>
</html>

JavaScript代码

// 页面加载完成后保存每个按钮的原始内容
document.addEventListener('DOMContentLoaded', function() {
    window.poBtnOriginal = document.getElementById('ButtonRehanPo').innerHTML;
    window.daBtnOriginal = document.getElementById('ButtonRehanDa').innerHTML;
    window.allBtnOriginal = document.getElementById('ButtonRehanAll').innerHTML;
});

function NewPagePo() {
  open("indexPo.html", "_self");
}

function NewPageAll() {
  open("indexAll.html", "_self");
}

function NewPageDa() {
  open("indexDa.html", "_self");
}

function Back() {
  open("index.html", "_self");
}

// 显示各角色简介
function ShowPoDesc() {
  document.getElementById('ButtonRehanPo').innerHTML = `Tomoko Polite<br><small>礼貌型角色，擅长与NPC对话解锁隐藏剧情</small> <img id="TomoPicL" src="photos/20221109_054642.jpg" alt="Dog">`;
}

function ShowDaDesc() {
  document.getElementById('ButtonRehanDa').innerHTML = `Tomoko Dangerous<br><small>危险型角色，攻击力拉满，适合快速战斗</small> <img id="TomoPicR" src="photos/CIMG0093.JPG" alt="Dog">`;
}

function ShowAllDesc() {
  document.getElementById('ButtonRehanAll').innerHTML = `Tomoko All-Rounder<br><small>全能型角色，攻防均衡，适配所有游戏场景</small> <img id="TomoPicM" src="photos/20211214_192451.jpg" alt="Dog">`;
}

// 恢复原始按钮文本
function RestorePoText() {
  document.getElementById('ButtonRehanPo').innerHTML = window.poBtnOriginal;
}

function RestoreDaText() {
  document.getElementById('ButtonRehanDa').innerHTML = window.daBtnOriginal;
}

function RestoreAllText() {
  document.getElementById('ButtonRehanAll').innerHTML = window.allBtnOriginal;
}

CSS代码（仅调整路径提示，其余保留）

/* 注意：把图片放在项目根目录的photos文件夹下，路径改为相对路径 */
/* 其余原有CSS代码保持不变 */

关键知识点说明 #

• innerHTML：用来读写元素内部的所有HTML内容，包括文本、标签、图片等。你可以用它添加换行（<br>）、小字体（<small>）等标签来美化简介样式。
• 事件选择：onmouseover是鼠标移到元素上时触发，onmouseout是鼠标离开时触发，这两个事件组合刚好实现悬停显示/隐藏的效果。
• DOM加载顺序：把<script>放在<body>末尾，或者用DOMContentLoaded事件，确保页面元素都加载完成后再获取和操作它们，避免找不到元素的问题。

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