I’m working on a commission right now and in the setup there’s two sets of buttons. One controls the like, main area, and in one of the tabs for the main area it shows a box meant to hold an image, and then an area to the side next to it that switches with tabs. For some reason, my second set of images causes the area to go blank, displaying nothing and removing the box. How do I fix this? Where did I go wrong?
Here’s my html, css, and javascript:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="style.css">
</head>
<body>
<div id="wrapper">
<!---TABS--->
<div class="tab">
<button class="tablinks" onclick="Tabs(event, 'profile')" id="defaultOpen">Profile</button>
<button class="tablinks" onclick="Tabs(event, 'ref')">Ref Sheet</button>
</div>
<div id="main">
<!---CONTENT--->
<div id="content">
<!---PROFILE--->
<div id="profile" class="tabcontent">
<!---PROFILE IMAGE--->
<div id="profileimage"></div>
<!---PROFILE BUTTONS--->
<div class="tab2" id="buttons2">
<button class="tablinks" onclick="Tabs(event, 'about')" id="defaultOpen">About</button>
<button class="tablinks" onclick="Tabs(event, 'extra')">Extra</button>
</div>
<!---ABOUT--->
<div id="about" class="tabcontent">hello</div>
</div>
<!---REF SHEET FT REFERENCES--->
<div id="ref" class="tabcontent">
<!---FLEX CONTAINER CONTAINING THE REFERENCES
note: remove a div containing an <img src> to remove an image,
copypaste a div containing an <img src> to add an image--->
<div id="references" class="flex-container">
<div class="box">
<!---IMAGE 1--->
<img src="https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg">
</div>
<div class="box">
<!---IMAGE 2--->
<img src="https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg">
</div>
<div class="box">
<!---IMAGE 3--->
<img src="https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg">
</div>
<div class="box">
<!---IMAGE 4--->
<img src="https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg">
</div>
<div class="box">
<!---IMAGE 5--->
<img src="https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg">
</div>
<div class="box">
<!---IMAGE 6--->
<img src="https://t3.ftcdn.net/jpg/03/45/05/92/360_F_345059232_CPieT8RIWOUk4JqBkkWkIETYAkmz2b75.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="javascript.js"></script>
</body>
</html>
#wrapper {
width:100%;
height:100%;
display:inline-block;
}
#main {
color:red;
background-color:pink;
width:52%;
height:30rem;
margin-top:3rem;
margin-inline:auto;
border:6px solid;
border-color:brown;
border-radius:15% / 38px;
padding:4px;
}
#content {
color:rgb(0, 0, 0);
background-color:beige;
width:96%;
height:27rem;
position:relative;
top:1.4rem;
margin-inline:auto;
border:4.5px solid brown;
border-radius:15% / 30px;
overflow:auto;
scrollbar-width:none;
}
#profileimage {
background-color:pink;
width:16rem;
height:25rem;
border:2.5px solid brown;
border-radius:15% / 15px;
position:relative;
top:0.4rem;
}
#references {
color:red;
}
.flex-container {
display: flex;
flex-wrap:wrap;
margin: 0 auto;
}
.box {
flex-grow:1;
flex-shrink:1;
flex-basis:calc(25% - 10px);
margin:5px;
}
img {
width:100%;
}
.tab {
position:relative;
text-align:center;
top:4.5rem;
}
.tab button {
background-color:burlywood;
padding:4px;
width:10rem;
font-size:1.8rem;
border:6px solid brown;
border-radius:10% / 8px;
cursor:pointer;
color:rgb(176, 103, 66);
}
.tab2 {
position:absolute;
text-align:center;
top:0.5rem;
left:22rem;
}
.tab2 button {
background-color:burlywood;
width:8rem;
font-size:18px;
border:3.5px solid brown;
border-radius:10% / 8px;
cursor:pointer;
color:rgb(176, 103, 66);
}
.tab button:hover {
background-color:rgb(191, 147, 89);
color:rgb(144, 58, 32);
border:6px solid brown;
border-radius:10% / 8px;
}
.tab button:active {
background-color:rgb(153, 73, 51);
color:rgb(70, 21, 6);
border:4px solid brown;
border-radius:10% / 8px;
}
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
}
function Tabs(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
I honestly have no clue what’s up with this. I tried messing with the naming conventions and altering the javascript very lightly a few times, but, admittedly I don’t know javascript much at all yet so there wasn’t much I knew to do. I’m guessing that I misplaced the tabs div in the html but I tried moving it around and it didn’t change anything at all. I’m so lost on this I’ve spent two days getting no work done because I just don’t know what’s going on with the issue.