javascript - 使用 JavaScript 单击按钮时将图像更改为另一个图像

Question

我的网站上显示了一张图片。我想编写一个 JavaScript 代码来在单击给定按钮时更改该图像，并且我想在单击另一个按钮时显示另一个图像，依此类推。让我向您展示我是如何尝试解决这个问题的：

HTML：

<div class ="container image">
            <figure>
              <img src="alpaca/backgrounds/blue50.png"  id="picture" class ="show1" />
            </figure></div>

Javascript：

const image = document.getElementById("picture");

     function showImg() {
      image.src = "blue50.png";
      //hide previously shown image
      for ( i = 1; i < 18; i++) {
          var obj = document.getElementById( "picture" + i );
          if (obj != null)
              obj.className = 'hide1';
      }
      var obj = document.getElementById( "picture" + id );      
      if (obj != null)
          obj.className = 'show1';
    }

CSS：

.container {
    position: absolute;
    bottom:60px;
    left: -140px;
    
    
  }
   
  .image { 
    position:absolute;
    
    
  }
 
  .eye { 
    position:absolute;
    z-index: 10;
    
    
  }

  .mouth { 
    position:absolute;
    z-index: 8;
    
    
  }
  .nose { 
    position:absolute;
    z-index: 8;
    
    
  }

  .show1{display:block;}
  .hide1{display:none;}
  .leftButton {
    color: black;
    text-align:right;
    font-size:35px;
    font-family: 'sofia';
    border-radius: 30px;
    background-color:rgb(252, 228, 228);
    position:absolute;
    bottom: -410px;
    left:200px;
    
  }

你看，我需要的是例如，当单击“背景”的按钮“blue60”时，我应该得到另一个背景图像，这与其他按钮相同。现在，当单击“blue60”按钮时，我什么也得不到。请帮我解决这个问题。

<div id="Backgrounds" ><p class="para">Backgrounds</p>
        
        <button type="button" onclick="showImg(1)" src="Alpaca/backgrounds/blue50" class="rightSubButton">Blue50</button>
        <button type="button" onclick="showImg(2)" src="Alpaca/backgrounds/blue60" class ="rightSubButton">Blue60</button>
        <button type="button" onclick="showImg(3)" src="Alpaca/backgrounds/blue70" class ="rightSubButton">Blue70</button>
        <button type="button" onclick="showImg(4)" class ="rightSubButton">Darkblue30</button>
        <button type="button" onclick="showImg(5)" class ="rightSubButton">Darkblue50</button>
        <button type="button" onclick="showImg(6)" class ="rightSubButton">Darkblue70</button>
        <button type="button" onclick="showImg(7)" class="rightSubButton">Green50</button>
        <button type="button" onclick="showImg(8)" class ="rightSubButton">Green60</button>
        <button type="button" onclick="showImg(9)" class ="rightSubButton">Green70</button>
        <button type="button" onclick="showImg(10)" class ="rightSubButton">Grey40</button>
        <button type="button" onclick="showImg(11)" class ="rightSubButton">Grey70</button>
        <button type="button" onclick="showImg(12)" class ="rightSubButton">Grey80</button>
        <button type="button" onclick="showImg(13)"class ="rightSubButton">Red50</button>
        <button type="button" onclick="showImg(14)"class ="rightSubButton">Red60</button>
        <button type="button" onclick="showImg(15)"class ="rightSubButton">Red70</button>
        <button type="button" onclick="showImg(16)"class ="rightSubButton">Yellow50</button>
        <button type="button" onclick="showImg(17)"class ="rightSubButton">Yellow60</button>
        <button type="button" onclick="showImg(18)"class ="rightSubButton">Yellow70</button>
      </div>
        <div id="Ears" ><p class="para">Ears</p>
          <button type="button" class="rightSubButton">Default</button>
          <button type="button" class ="rightSubButton">Tilt-backward</button>
          <button type="button" class ="rightSubButton">Tilt-forward</button>
      </div>

标签： javascripthtmlcss

Answer 1

您可以更改src所需的属性HTMLImageElement以更改其图像：

const image = document.getElementById('...');

function showImg(number) {
  image.src = '...'; // Path or URL to image
}