I dont get the two images with my document.getElementById

JavaScript
1

trying to get both images but Im only getting one of the two images

<button onclick="setTimeout(myFunction, 2000)">Please show me the images</button>
	<button onclick="myFunction2()">Please hide the images</button>

	<img src="1.jpg" id="myPic" style="display: none;">
	<img src="2.jpg" id="myPic" style="display: none;">

img {
	visibility: hidden;
	clear: left;
	width: 30%;
}
button {
	float: left;
	margin: 5px;
}

function myFunction() {
	document.getElementById("myPic").style.visibility="visible",
	document.getElementById("myPic").style.display="block";
}
function myFunction2() {
	document.getElementById("myPic").style.visibility="hidden",
	document.getElementById("myPic").style.display="none";
}
2

Ids must be unique. getElementById only gets a single instance because there should only BE one instance of an id.

3

I also been trying with classes like this but didnt work

<img src="1.jpg" class="myPic" style="display: none;">
<img src="2.jpg" class="myPic2" style="display: none;">

function myFunction() {
	document.getElementByClassName(".myPic, .myPic2")style.visibility="visible",
	document.getElementByClassName(".myPic, .myPic2").style.display="block";
}
function myFunction2() {
	document.getElementByClassName(".myPic, .myPic2").style.visibility="hidden",
	document.getElementByClassName(".myPic, .myPic2").style.display="none";
}
4

If you’re using querySelector, use the dots for classes or the octothorpe (#) for ids. If you use getElementByClassName, just use the name without the leading dot.

5

thanks very useful thanks alot