CODEWITHSUNDEEP
javascripthtmlcss
Anonymowse
Anonymowse

Reputation: 13

JavaScript Tabs: onclick not executing function

I have a tab system on my website that should show the content of two different tabs onclick, but when I click it it doesn't work. I think there is something wrong with my document.getElementById("tutorial").onclick = function() and document.getElementById("editor").onclick = function() but I can't seem to see what at the moment.

Here is my code:

function openTab(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("tutorial").onclick = function() {
    openTab(event, 'tutorial');
}

document.getElementById("editor").onclick = function() {
    openTab(event, 'editor');
}

document.getElementById("defaultOpen").click();
body {
    padding: 0 !important;
}

/* Style the tab */
div.tab {
    overflow: hidden;
    background-color: #f1f1f1;
    width: 100%;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.1s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 0.1s;
    animation: fadeEffect 0.1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
<!DOCTYPE html>
<html>
	<head>
		<title>{{ page.title }}</title>
		<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
	</head>
	<body>
		<div class="tab">
		  <button class="tablinks" id="defaultOpen">Tutorial</button>
		  <button class="tablinks">Editor</button>
		</div>

		<div id="tutorial" class="tabcontent">
		  {{ content }}
		</div>

		<div id="editor" class="tabcontent">
		  Editor 
		</div>
		
		<script src="/assets/js/main.js"></script>
	</body>
</html>

Please help

Upvotes: 1

Views: 4201

Answers (2)

gauravmuk
gauravmuk

Reputation: 1616

Solution:

document.getElementById("tutorialBtn").onclick = function(event) {
    openTab(event, 'tutorial');
}

document.getElementById("editorBtn").onclick = function(event) {
    openTab(event, 'editor');
}


<div class="tab">
    <button class="tablinks" id="tutorialBtn">Tutorial</button>
    <button class="tablinks" id="editorBtn">Editor</button>
</div>

You forgot to pass event to the function on click. Passing event should fix the issue.

Upvotes: 0

user94559
user94559

Reputation: 60143

You set your click handlers on the divs with the content, not the tabs. I've modified your code to add IDs to the tabs themselves and set up click handlers there instead.

(Note that I also changed the defaultOpen ID, since elements can only have one ID each, and I added the ID tutorialTab.)

I also passed through event as pointed out by others.

function openTab(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("tutorialTab").onclick = function(event) {
    openTab(event, 'tutorial');
}

document.getElementById("editorTab").onclick = function(event) {
    openTab(event, 'editor');
}

document.getElementById("tutorialTab").click();
body {
    padding: 0 !important;
}

/* Style the tab */
div.tab {
    overflow: hidden;
    background-color: #f1f1f1;
    width: 100%;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.1s;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    -webkit-animation: fadeEffect 0.1s;
    animation: fadeEffect 0.1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}
<!DOCTYPE html>
<html>
	<head>
		<title>{{ page.title }}</title>
		<link rel="stylesheet" type="text/css" href="/assets/css/main.css">
	</head>
	<body>
		<div class="tab">
		  <button class="tablinks defaultOpen" id="tutorialTab">Tutorial</button>
		  <button class="tablinks" id="editorTab">Editor</button>
		</div>

		<div id="tutorial" class="tabcontent">
		  {{ content }}
		</div>

		<div id="editor" class="tabcontent">
		  Editor 
		</div>
		
		<script src="/assets/js/main.js"></script>
	</body>
</html>

Upvotes: 2

Related Questions