Javascript 根据html中的输入，document.getElementBy（id？）。可点击图库

最终目标是制作一个画廊（纯JS）。在此之前，我正在尝试一个模型。两个按钮，如果单击#1，将在下面显示字符串1.jpg，如果单击#2，将显示字符串2.jpg。我希望它在一个函数中工作。到目前为止，我所拥有的：

Javascript:

var imageData = new Array (2);
imageData[0]="1.jpg";
imageData[1]="2.jpg";


function gallery() {
var answer = document.getElementById("what").value;
document.getElementById("show").innerText = imageData[answer];
}

HTML:

1
2.

所以很明显我不能有两个id名为“什么”。
但是，如果我命名了包含这两个按钮的div，那么什么也不会发生，我尝试过使用类似于：

.class

，

getByName

等的方法，但不知何故它不起作用。我应该使用什么命令？我这样做不对吗？我应该在html中创建某种数组吗？你是怎么做到的

---

谢谢

您可以将

此

作为参数传递给函数，它在您在DOM中单击的当前对象中传递了什么。这样，您甚至不需要使用id：

<button onclick="gallery(this)" value="1">1</button>
<button onclick="gallery(this)" value="2">2</button>

<button onclick="gallery(this)" value="1">1</button>
<button onclick="gallery(this)" value="2">2</button>

function gallery( item ) {
    var answer = item.value;
    ...
}