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侦听器。在img单击上创建button元素，并将其附加到具有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>

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

2 个答案: