I am currently working towards creating a gallery using pure JavaScript. To start, I am experimenting with a model that involves two buttons - when button #1 is clicked, the string "1.jpg" appears below, and when button #2 is clicked, "2.jpg" is displayed. I aim to achieve this functionality within a single function. Here is what I have implemented so far:
Javascript:
var imageData = new Array(2);
imageData[0] = "1.jpg";
imageData[1] = "2.jpg";
function displayImage() {
var selection = document.getElementById("selected").value;
document.getElementById("output").innerText = imageData[selection];
}
HTML:
<button onclick="displayImage()" id="selected" value="0">1</button>
<button onclick="displayImage()" id="selected" value="1">2</button>
<div id="output"></div>
It seems like having two elements with the same ID name ("what") causes issues.
I have attempted to group the buttons inside a div and target them as a whole by using classes or getByName, but it hasn't worked for me. What approach should I take? Is there a better way to handle this? Should I utilize arrays in HTML? How would you tackle this problem?
Thank you!