Image doesn't let me click buttons - html

Question

I'm making a webpage for a class, and have been instructed to make three divs that can be hidden and shown with a set of buttons at the top of the page. The buttons themselves work fine, however whenever I click on the third one the third div shows up as expected, but then i can't click on any of the buttons anymore.
What's supposed to happen is that I can click on any of the buttons to make the current div disappear and the one for the button I clicked appear, however instead once the third one shows up I can't click the buttons at all. I noticed that when I tried double clicking the buttons, it selected the image at the top of the third div, so I tried getting rid of the image, which made the buttons work again. I have to keep the image though, so I had to put it back, and then tried seeing if maybe the image was actually super big, just with most of it being empty and overlapping with the buttons, however when I put a border on it it showed the edges of the image were the expected size, and not covering the buttons at all, yet somehow it was still stopping me from clicking the button. I've tried setting the z-index to -1 and -10, neither worked, and setting pointer-events to none, which also didn't work. I've tried getting rid of some fiex position properties, but that made the div or top bar be drawn, in the div's case, too high, and in the bar's case, too thin, and with the buttons above it. My goal with the positioning is the have the div a bit below the bar at the top, with the picture centered inside it, and the bar having a little under about the height of the buttons worth of padding above and below the buttons. How might I fix this problem?
function toggle() {
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
var z = document.getElementById("myDIV1");
if (x.style.display === "flex") {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "flex";
y.style.display = "none";
z.style.display = "none";
}
}
function toggle2() {
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
var z = document.getElementById("myDIV1");
if (x.style.display === "flex") {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "flex";
z.style.display = "none";
}
}
function toggle1() {
var x = document.getElementById("myDIV");
var y = document.getElementById("myDIV2");
var z = document.getElementById("myDIV1");
if (x.style.display === "flex") {
x.style.display = "none";
y.style.display = "none";
z.style.display = "none";
} else {
x.style.display = "none";
y.style.display = "none";
z.style.display = "flex";
}
}
.LandingBar {
background: black;
position: fixed;
left: 0;
height: 13%;
width: 100%;
margin-top: 2.5%;
Opacity: 60%;
top: 20px;
}
.btn {
background: none;
opacity: 1;
border-radius: 10px;
border: 2px solid white;
cursor: pointer;
color: white;
font-family: Helvetica;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 10px 5px 10px;
}
.alignV {
position: relative;
top: 50%;
transform: translateY(-50%);
align-items: center;
justify-content: center;
}
.btn-space {
background: none;
opacity: 0;
width: 50px;
}
.btn:hover,
.btn:focus {
background-color: yellow;
color: black;
}
#myDIV {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
padding: 1%;
/*background-color: lightblue;*/
flex-direction: row;
font-family: Helvetica;
display: none;
}
.myDIVbox {
position: relative;
left: 0;
/*border: 2px solid red;*/
width: 60%;
height: 50%;
padding-bottom: 30px;
padding-top: 30px;
display: inline-flex;
flex-direction: row;
font-family: Helvetica;
color: white;
background: black;
opacity: 60%;
padding-left: 30px;
padding-right: 30px;
flex-direction: column;
top: 80px;
}
.logo {
position: relative;
left: 310px;
/*border: 5px solid red;*/
}
.btn1 {
background: none;
opacity: 1;
border-radius: 10px;
border: 2px solid white;
cursor: pointer;
color: white;
font-family: Helvetica;
font-size: 1em;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 10px 5px 10px;
width: 25%;
position: relative;
left: 290px;
}
#myDIV1 {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
padding: 1%;
/*background-color: lightblue;*/
flex-direction: row;
font-family: Helvetica;
display: none;
}
.myDIVbox1 {
position: relative;
left: 0;
/*border: 2px solid red;*/
width: 60%;
height: 50%;
padding-bottom: 30px;
padding-top: 30px;
display: inline-flex;
flex-direction: row;
font-family: Helvetica;
color: white;
background: black;
opacity: 60%;
padding-left: 30px;
padding-right: 30px;
flex-direction: column;
top: 80px;
}
#myDIV2 {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 100%;
text-align: center;
align-items: center;
justify-content: center;
padding: 1%;
/*background-color: lightblue;*/
flex-direction: row;
font-family: Helvetica;
display: none;
}
.myDIVbox2 {
position: relative;
left: 0;
/*border: 2px solid red;*/
width: 60%;
height: 50%;
padding-bottom: 30px;
padding-top: 30px;
display: inline-flex;
flex-direction: row;
font-family: Helvetica;
color: white;
background: black;
opacity: 60%;
padding-left: 30px;
padding-right: 30px;
flex-direction: column;
top: 80px;
}
<div class="LandingBar">
<button class="btn alignV" onclick="toggle1()">button 1</button>
<!--the buttons-->
<button class="btn-space alignV"></button>
<button class="btn alignV" onclick="toggle2()">button 2</button>
<button class="btn-space alignV"></button>
<button class="btn alignV" onclick="toggle()">the beatles</button>
</div>
<div id="myDIV">
<div class="myDIVbox">
<img class="logo" src="https://via.placeholder.com/300" height="20%" width="20%">
<br> Lorem Ipsum<br>
<br> Lorem Ipsum<br>
<br> lorem ipsum<br>
<button class="btn1">Lorem Ipsum</button>
</div>
</div>
<div id="myDIV2">
<div class="myDIVbox2">
content2<br> content
<br> content
<br>
<br>
<button class="btn1">Lorem Ipsum</button>
</div>
</div>
<div id="myDIV1">
<div class="myDIVbox1">
content1<br> content
<br> content
<br>
<br>
<button class="btn1">Lorem Ipsum</button>
</div>
</div>