应统一用 updateContent() 函数同步更新 img 和 p 元素，避免图文不同步、XSS 风险及 null 报错；需检查元素存在性，推荐用 mediaMap 解耦数据与结构。
用一个 JavaScript 函数统一更新 img 和 p 元素，比给每个按钮写一堆 onclick 更可靠、更易改。
为什么不能只改 src 或只改 textContent
常见错误是：按钮点下去，图片换了，文字没变；或者文字变了，图片还是旧的。本质是 DOM 更新没同步——要么漏写了某一行，要么两个操作被拆到不同函数里，后期维护时容易只改一半。更隐蔽的问题是，如果用了 innerHTML 拼接文案但没做转义，用户传入带 <script></script> 的字符串就可能触发 XSS。所以必须把图文更新锁在同一个函数体内，且默认用 textContent。
updateContent() 函数要检查元素是否存在
页面加载顺序、ID 拼错、元素被 JS 动态移除，都可能导致 document.getElementById('bannerImage') 返回 null。不加判断直接赋值 .src 会报错并中断后续逻辑。
- 用
if (imgElement)包裹图片更新块 - 同理检查
textElement是否存在，再设textContent - 可选：加
console.warn提示缺失元素，方便调试
HTML 按钮里传参要避免长 URL 写死
把一长串图片 URL 直接塞进 onclick="updateContent('https://...', '...')" 里，既难读又难维护。一旦图片地址批量更换，得逐个替换所有按钮。
- 推荐提前定义一个数据对象：
const mediaMap = { portugal: { img: 'https://...', text: 'Portugal' } } - 按钮只传 key：
onclick="updateContent('portugal')" - 函数内部查表取值，解耦内容与结构
- 若必须内联写 URL，请确保 URL 用单引号包裹，且内部不出现未转义的单引号
真正容易被忽略的是容错边界：比如用户点了按钮但网络还没加载完新图，img.src 赋值后不会立刻触发渲染，但 textContent 是立即生效的——图文短暂不同步是正常现象。如需强一致性，得监听 img.onload，但这会增加复杂度，多数场景没必要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
