Whenever I am on my new profile tab I can't click on my other tabs to go to them. I've included my code below. I can go from my Dashboard tab to New Profile tab fine but not the other way around. I can also go from New Task to New Profile just fine the only exception is when I go out from New Profile to another tab.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
label{
display: inline-block;
width: 140px;
text-align: right;
}
input{
width: 140px
}
select{
width: 140px;
}
/* Split the screen in half */
.split {
height: 100%;
width: 50%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Control the left side */
.left {
left: 0;
/*background-color: #111; */
}
/* Control the right side */
.right {
right: 0;
/*background-color: red; */
}
/* Style the tab */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
position: relative;
clear:both;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 1280px 720px;
border: 1px solid #ccc;
border-top: none;
}
</style>
</head>
<body>
<!-- For the tab headers-->
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'ProfileTab')">New Profile</button>
<button class="tablinks" onclick="openCity(event, 'TaskTab')" id="defaultOpen">New Task</button>
<button class="tablinks" onclick="openCity(event, 'DashboardTab')">Dashboard</button>
</div>
<div id="ProfileTab" class="tabcontent">
<!-- Shipping and billing details will be on left half of screen. -->
<div class="split left">
<!-- Shipping Details -->
<h1>Shipping Details</h1>
<div class="block">
<label for="firstNameTextFieldShip">First Name:</label>
<input type="text" id="firstNameTextFieldShip" name="firstNameShip">
<label for="lastNameTextFieldShip">Last Name:</label>
<input type="text" id="lastNameTextFieldShip" name="lastNameShip">
</div>
<br>
<div class="block">
<label for="Address1TextFieldShip">Address:</label>
<input type="text" id="Address1TextFieldShip" name="add1txtfieldShip">
<label for="Address2TextField">Address 2:</label>
<input type="text" id="Address2TextFieldShip" name="add2txtfieldShip">
</div>
<br>
<div class="block">
<label for="ZipTextFieldShip">Zip Code:</label>
<input type="text" id="ZipTextFieldShip" name="ziptxtfieldShip">
<label for="CityTextFieldShip">City:</label>
<input type="text" id="CityTextFieldShip" name="citytxtfieldShip">
</div>
<br>
<div class="block">
<label for="CountriesSelectShip">Country:</label>
<select id="CountriesSelectShip">
<option value="USA">USA</option>
</select>
<label for="StateTextFieldShip">State:</label>
<input type="text" id="StateTextFieldShip" name="statetxtfieldShip">
</div>
<!-- Billing Details-->
<h1>Billing Details</h1>
<div class="block">
<label for="firstNameTextFieldBilling">First Name:</label>
<input type="text" id="firstNameTextFieldBilling" name="firstNameBilling">
<label for="lastNameTextFieldBilling">Last Name:</label>
<input type="text" id="lastNameTextFieldBilling" name="lastNameBilling">
</div>
<br>
<div class="block">
<label for="Address1TextFieldBilling">Address:</label>
<input type="text" id="Address1TextFieldBilling" name="add1txtfieldBilling">
<label for="Address2TextFieldBilling">Address 2:</label>
<input type="text" id="Address2TextFieldBilling" name="add2txtfieldBilling">
</div>
<br>
<div class="block">
<label for="ZipTextFieldBilling">Zip Code:</label>
<input type="text" id="ZipTextFieldBilling" name="ziptxtfieldBilling">
<label for="CityTextFieldBilling">City:</label>
<input type="text" id="CityTextFieldBilling" name="citytxtfieldBilling">
</div>
<br>
<div class="block">
<label for="CountriesSelectBilling">Country:</label>
<select id="CountriesSelectBilling">
<option value="USA">USA</option>
</select>
<label for="StateTextFieldBilling">State:</label>
<input type="text" id="StateTextFieldBilling" name="statetxtfieldBilling">
</div>
</div>
<div class="split right">
<h1>Payment Information</h1>
<div class="block">
<label for="ProfileNameTextField">Profile Name:</label>
<input type="text" id="ProfileNameTextField" name="profileNameTextField">
</div>
<br>
<div class="block">
<label for="EmailTextField">Email:</label>
<input type="text" id="EmailTextField" name="emailTextField">
</div>
<br>
<div class="block">
<label for="PhoneNumTextField">Phone Number:</label>
<input type="text" id="PhoneNumTextField" name="PhoneNumTextField">
</div>
<br>
<div class="block">
<label for="NameOnCardTextField">Name On Card:</label>
<input type="text" id="NameOnCardTextField" name="NameOnCardTextField">
</div>
<br>
<div class="block">
<label for="NumOnCardTextField">Number On Card:</label>
<input type="text" id="NumOnCardTextField" name="NumOnCardTextField">
</div>
<br>
<div class="block">
<label for="ExpirationTextField">Expiration Date:</label>
<input type="text" id="ExpirationTextField" name="ExpirationTextField">
</div>
<br>
<div class="block">
<label for="CVVTextField">CVV:</label>
<input type="text" id="CVVTextField" name="CVVTextField">
</div>
<br>
</div>
</div>
<!-- Tasks tab -->
<div id="TaskTab" class="tabcontent">
<h1>hi</h1>
</div>
<!-- Dashboard tab -->
<div id="DashboardTab" class="tabcontent">
</div>
<script>
document.getElementById("defaultOpen").click();
function openCity(evt, cityName) {
// Declare all variables
var i, tabcontent, tablinks;
// Get all elements with class="tabcontent" and hide them
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// Get all elements with class="tablinks" and remove the class "active"
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// Show the current tab, and add an "active" class to the button that opened the tab
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
console.log("hello");
}
</script>
</body>
</html>
Can't click on dashboard or New Task tab after being on New Profile tab