如何用JavaScript实现点击按钮同时切换图片与文本

方法一：扩展现有函数（适配你提到的多参数调用） #

直接修改你的changeImage函数，让它同时处理图片和文本的更新，然后在按钮的onclick中传入对应文本即可：

1. 更新JavaScript中的changeImage函数：

function changeImage(fileName, description) {
  // 更新图片
  let img = document.querySelector('#bannerImage');
  img.setAttribute('src', fileName);
  // 更新文本
  let textEl = document.querySelector('#text');
  textEl.textContent = description;
}

2. 修改每个按钮的onclick事件，传入对应图片地址和文本：

<button class="mainbuttons" onclick="changeImage('https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg', 'This is a picture of Northern Ireland')">Northern Ireland</button>
<button class="mainbuttons" onclick="changeImage('https://theworldpursuit.com/wp-content/uploads/2021/01/things-to-do-in-northern-ireland.jpg', 'My mum likes cooking')">Ireland</button>
<button class="mainbuttons" onclick="changeImage('https://d32uwaumftsuh7.cloudfront.net/Pictures/768x432/7/2/0/22720_gameofthronesthedarkhedges_thekingsroad_master_529527_crop.jpg', 'This is a picture of Scotland')">Scotland</button>
<button class="mainbuttons" onclick="changeImage('https://media.cntraveller.com/photos/611bf776db797d0116fd53ab/master/w_1600,c_limit/causeway-coast-in-antrim-northern-ireland-gettyimages-1193546847.jpg', 'This is a picture of Wales')">Wales</button>
<button class="mainbuttons" onclick="changeImage('https://onhisowntrip.com/wp-content/uploads/2020/08/Great-British-Chefs-1.jpg', 'This is a picture of Spain')">Spain</button>

方法二：数据属性+事件委托（更规范易维护） #

把图片地址和文本存在按钮的自定义属性中，通过事件委托统一处理点击逻辑，避免重复写onclick：

1. 修改HTML按钮，移除onclick，添加data-img和data-text属性：

<nav>
  <button class="mainbuttons" data-img="https://www.planetware.com/wpimages/2020/03/portugal-in-pictures-beautiful-places-to-photograph-lisbon.jpg" data-text="This is a picture of Northern Ireland">Northern Ireland</button>
  <button class="mainbuttons" data-img="https://theworldpursuit.com/wp-content/uploads/2021/01/things-to-do-in-northern-ireland.jpg" data-text="My mum likes cooking">Ireland</button>
  <button class="mainbuttons" data-img="https://d32uwaumftsuh7.cloudfront.net/Pictures/768x432/7/2/0/22720_gameofthronesthedarkhedges_thekingsroad_master_529527_crop.jpg" data-text="This is a picture of Scotland">Scotland</button>
  <button class="mainbuttons" data-img="https://media.cntraveller.com/photos/611bf776db797d0116fd53ab/master/w_1600,c_limit/causeway-coast-in-antrim-northern-ireland-gettyimages-1193546847.jpg" data-text="This is a picture of Wales">Wales</button>
  <button class="mainbuttons" data-img="https://onhisowntrip.com/wp-content/uploads/2020/08/Great-British-Chefs-1.jpg" data-text="This is a picture of Spain">Spain</button>         
</nav>

2. 更新JavaScript代码，替换原changeImage函数为事件委托逻辑：

// 监听导航栏的点击事件
document.querySelector('nav').addEventListener('click', function(e) {
  // 只处理按钮的点击
  if (e.target.classList.contains('mainbuttons')) {
    const imgUrl = e.target.dataset.img;
    const text = e.target.dataset.text;
    // 更新图片
    document.querySelector('#bannerImage').src = imgUrl;
    // 更新文本
    document.querySelector('#text').textContent = text;
  }
});

// 保留原主题切换函数不变
function toggleTheme(){
  window.theme = typeof(window.theme)==='string' ? window.theme : 'root';
  var switchToTheme = window.theme === 'root' ? 'dark' : 'root';
  window.theme = switchToTheme;
  document.querySelector('html').setAttribute('data-theme',switchToTheme);
}

额外修复 #

你的HTML代码存在冗余标签，末尾的</body>和</div>需要删除，修正后的结构应为：

</main>
</body>
</html>

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