JavaScript：如何使圖像在單擊按鈕時顯示？

Question

我有多個按鈕（ID為'a'，'b'，...），如果單擊它們，它們應該在以下位置顯示其對應的圖像（'a.JPG'，'b.JPG'，...）網站上的固定點。

這個想法是偵聽單擊按鈕的時間，然后更改輸出中的代碼以包含其ID。

'use strict';
var bild = '', i, j, k;

function gedrueckt(k) {
    bild = '<img src="img/' + k + '.JPG" width="1600" hight="900" alt="Vergroessertes Bild"></img>';
    document.querySelector('output').innerHTML = bild;
}

for (i = 1; i < 8; i = i + 1) {
    j = String.fromCharCode(97 + i);
    document.getElementById(j).addEventListener('click', gedrueckt(j));
}

問題是單擊任何按鈕之前圖像已經出現，並且按其他按鈕不會更改顯示的圖像。

Answer 1

此代碼應在每次單擊按鈕時更改src，並根據按鈕的ID更改圖片：

 let img = document.getElementById('img') const change = id => { img.src = `${id}.jpeg` img.alt = `${id}.jpeg` } 

 <img id="img" src=""> <br> <button onclick="change(this.id)" id="a">A</button> <button onclick="change(this.id)" id="b">B</button> <button onclick="change(this.id)" id="c">C</button> 

如果沒有src且未提供alt屬性，則不會顯示該圖像。

我可能會誤解您的意思，因為您希望在按鍵盤按鈕時更改圖像，此代碼可以解決這個問題：

 let img = document.getElementById('img') const change = id => { img.src = `${id}.jpeg` img.alt = `${id}.jpeg` } const list = ['a','b','c'] document.addEventListener('keydown', e => list.includes(e.key) && change(e.key)) 

 <img id="img" src=""> 

Answer 2

獲取所有按鈕，並在其上附加一個click偵聽器。 單擊button創建img元素，並將其附加到具有id輸出的元素上。

 const buttons = document.querySelectorAll('button') const output = document.querySelector('#output'); buttons.forEach((button) => { button.addEventListener('click', function() { const img = document.createElement('img'); img.src = this.id + '.jpg'; output.innerHTML = ""; output.appendChild(img); }); }); 

 <button id="a">one</button> <button id="b">two</button> <button id="c">three</button> <div id="output"></div>