不同 CSS 文件中的不同按钮图像答案

【问题标题】：different button images in different CSS files不同 CSS 文件中的不同按钮图像
【发布时间】：2021-10-13 17:58:18
【问题描述】：

我的工作是使用按钮将不同的 CSS 文件合并到一个 HTML 中。因此，每次单击按钮时，CSS 设计都会发生变化。我通过使用 JavaScript 添加和删除每个 CSS 解决了这个任务。我的问题：我希望每个页面的按钮中有不同的图像，但到目前为止，我的按钮中只有 HTML 中的图像。

Java 规范：

 let body = document.body;

 let actionBtn = document.getElementById('action');
 let loveBtn = document.getElementById('love');
 let cartoonBtn = document.getElementById('cartoon');
 let animeBtn = document.getElementById('anime');
 let childrenBtn = document.getElementById('children');

 actionBtn.addEventListener('click', () => {
 body.classList.remove('love','cartoon','anime');
 body.classList.add('action');
 });

HTML：

 <div class="button">
 <button id="action"><img src="action.png" alt="Actionfilm-Bild"></button>
 <button id="love"><img src="love.png" alt="Liebesfilm-Bild"></button>
 <button id="cartoon"><img src="cartoon.png" alt="Cartoon-Bild"></button>
 <button id="anime"><img src="anime.png" alt="Anime-Bild"></button>

【问题讨论】：

我认为需要更多信息来帮助您。如果您只想更改图像的 src，您可以为每个 <img> 标签指定一个 id 并使用 document.getElementById("imageid").src = "newimage.png，但我什至不确定这是否是您想要的。
我现在已经更详细地发布了。我希望现在更容易理解了。

标签： image button

【解决方案1】：

好的，所以你必须完全按照我的评论去做，但我会在这里回答以向你展示我的意思。您只需要在您的 javascript 文件中添加一些内容并为每张图片添加一个 id。

HTML：

<button id="action"><img id="actionBtnImage src="action.png" alt="Actionfilm-Bild"></button>

let body = document.body;

let actionBtn = document.getElementById('action');
let actionBtnImage = document.getElementById('actionBtnImage');

actionBtn.addEventListener('click', () => {
       body.classList.remove('love','cartoon','anime','children','western','scary','fantasy','quiet','nature');
       body.classList.add('action');
       actionBtnImage.src="newimage.png";    //Do this for each button image you want to change
});

这当然只是一个按钮，但我认为你应该能够自己做其他的！

【讨论】：

非常感谢。有道理。但现在有些东西不起作用。我将发布我的 Java 和 HTML，也许你知道发生了什么。我将编辑我的最后一篇文章。
@Sarah 我不建议编辑您的帖子，因为它可能会完全改变问题的主题，并且不是您真正想要在 StackOverflow 上做的事情。您可以编辑您的问题并在最后附加新问题，但您为什么不直接查找您的新问题，.StackOverflow 并不是真的来指导您完成整个项目，我当然没有时间也可以这样做。
对不起。我不知道。下次我会知道的。再次感谢您的方法。

【解决方案2】：

this is what happend

     let actionBtn = document.getElementById('action');
     let actionBtnImage = document.getElementById('actionBtnImage');
     let loveBtn = document.getElementById('love');
     let cartoonBtn = document.getElementById('cartoon');
     let animeBtn = document.getElementById('anime');
     let childrenBtn = document.getElementById('children');
     let westernBtn = document.getElementById('western');
     let scaryBtn = document.getElementById('scary');
     let fantasyBtn = document.getElementById('fantasy');
     let quietBtn = document.getElementById('quiet');
     let natureBtn = document.getElementById('nature');

     actionBtn.addEventListener('click', () => {
       body.classList.remove('love','cartoon','anime','children','western','scary','fantasy','quiet','nature');
       body.classList.add('action');
       actionBtnImage.src="action.png";
       loveBtnImage.src="love.png";
       cartoonBtnImage.src="cartoon.png";
       animeBtnImage.src="anime.png";
       childrenBtn.src="children.png";
       westernBtn.src="scary.png";
       fantasyBtn.src="fantasy.png";
       quietBtn.src="quiet.png";
       natureBtn.src="nature.png";
     });

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sarah Schönfelder</title>
    <link rel="stylesheet" href="action.css">
    <link rel="stylesheet" href="love.css">
    <link rel="stylesheet" href="cartoon.css">
    <link rel="stylesheet" href="anime.css">
    <link rel="stylesheet" href="children.css">
    <link rel="stylesheet" href="western.css">
    <link rel="stylesheet" href="scary.css">
    <link rel="stylesheet" href="fantasy.css">
    <link rel="stylesheet" href="quiet.css">
    <link rel="stylesheet" href="nature.css">
    <link rel="stylesheet" href="all.css">
  </head>

  <header>
   <nav>
    <div class="button">
      <button id="action"><img id="actionBtnImage" alt="Actionfilm-Bild"></button>
      <button id="love"><img id="loveBtnImage" alt="Liebesfilm-Bild"></button>
      <button id="cartoon"><img id="cartoonBtnImage" alt="Cartoon-Bild"></button>
      <button id="anime"><img id="animeBtnImage" alt="Anime-Bild"></button>
      <button id="children"><img id="childrenBtnImage" alt="Kinderfilm-Bild"></button>
      <button id="western"><img id="westernBtnImage" alt="Westernfilm-Bild"></button>
      <button id="scary"><img id="scaryBtnImage" alt="Horrorfilm-Bild"></button>
      <button id="fantasy"><img id="fantasyBtnImage" alt="Fantasyfilm-Bild"></button>
      <button id="quiet"><img id="quietBtnImage" alt="Stummfilm-Bild"></button>
      <button id="nature"><img id="natureBtnImage" alt="Doku-Bild"></button>
    </div>
   </nav>
  </header>
<body>
</body>
</html>

【讨论】：

我在这里唯一能找到的是你删除了这一行let body = document.body; 不知道为什么或者你只是在这里忘记了它，但这是我在这里得到的错误。