JavaScript：如何在点击按钮时显示图像？

我有多个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));
}

---

问题是，在单击任何按钮之前，图像已经出现，按下其他按钮不会更改显示的图像。

获取所有按钮并在其上附加一个单击侦听器。单击按钮创建img元素，并将其附加到具有id输出的元素

const buttons=document.queryselectoral'button' const output=document.querySelector'output'； buttons.forEachbutton=>{ 按钮。addEventListener“单击”功能{ const img=document.createElement'img'； img.src=this.id+'.jpg'； output.innerHTML=； output.appendChildimg； }; }; 一 二 三

---

此代码应更改每次单击按钮时的src，并根据按钮ID更改图片：

让img=document.getElementById'img' const change=id=>{ img.src=`${id}.jpeg` img.alt=`${id}.jpeg` } A. B

---

C能否添加一部分HTML代码？