<!-- Tab Content -->
<div id="googleapps" class="tabcontent">
<h3>GoogleApps</h3>
<!-- This is where the links will go-->
</div>
<div id="myapps" class="tabcontent">
<h3>My Apps</h3>
<!-- This is where this links will go-->
</div>
<div id="mytimetable" class="tabcontent">
<h3>My TimeTable</h3>
<!-- This is where the links will go-->
</div>
<div id="myclassroom" class="tabcontent">
<h3>My Classroom</h3>
<p>This is your classroom</p>
<!-- This is where the links will go-->
</div>
<script>
funtion openTabs(evt, tabsName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tablinks.length; i++) {
tablinks.className += " active";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace("" active", "");
}
document.getElementById(tabsName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
<script>
document.getElementById("header").innerHTML = "The Weald School Smart Portal";
document.getElementById("header").style.color = "white";
</script>
</html>
Getting the errors:
Portal.htm:112 Uncaught SyntaxError: Unexpected identifier
Portal.htm:82 Uncaught ReferenceError: openTabs is not defined
at HTMLButtonElement.onclick (Portal.htm:82)
onclick @ Portal.htm:82
Portal.htm:83 Uncaught ReferenceError: openTabs is not defined
at HTMLButtonElement.onclick (Portal.htm:83)
onclick @ Portal.htm:83
Portal.htm:84 Uncaught SyntaxError: missing ) after argument list
Portal.htm:85 Uncaught SyntaxError: missing ) after argument list
Not sure why because everything looks right but I'm probably just being stupid lol.
Java Script error
in JavaScript
Posted
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-size: 14px;
font-family: trebuchet ms;
color:black;
}
body {
font-family: Trebuchet ms;
}
.tabs {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
.tab button:hover {
background-color: #ddd;
}
.tab button.active {
background-color: #ccc;
}
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
.wealdheader {
background: #851d18;
font-size: 30px;
color: white;
padding: 10px;
width:100%;
height: auto;
margin: 0;
}
.wealdlogo {
margin-left: 0;
margin-right: auto;
padding: 5px;
width: 60%;
}
</style>
<title>The Weald Portal</title>
</head>
<body>
<header>
<div class="wealdlogo">
<a href="https://www.theweald.org.uk/">
<img src="C:\Users\EmilyB\Desktop\Weald School Portal\Images\Weald School/weald logo.png" alt="weald school logo">
</a>
</div>
<h1 class="wealdheader"id="header"></h1>
</header>
<!-- Tab Links -->
<div class"tabs">
<button class="tablinks" onclick="openTabs(event, 'GoogleApps')">googleapps</button>
<button class="tablinks" onclick="openTabs(event, 'myapps')">myapps</button>
<button class="tablinks" onclick="openTabs(event 'mytimetable')">mytimetable</button>
<button class="tablinks" onclick="openTabs(event 'myclassroom')">myclassroom</button>
</div>
<!-- Tab Content -->
<div id="googleapps" class="tabcontent">
<h3>GoogleApps</h3>
<!-- This is where the links will go-->
</div>
<div id="myapps" class="tabcontent">
<h3>My Apps</h3>
<!-- This is where this links will go-->
</div>
<div id="mytimetable" class="tabcontent">
<h3>My TimeTable</h3>
<!-- This is where the links will go-->
</div>
<div id="myclassroom" class="tabcontent">
<h3>My Classroom</h3>
<p>This is your classroom</p>
<!-- This is where the links will go-->
</div>
<script>
funtion openTabs(evt, tabsName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tablinks.length; i++) {
tablinks.className += " active";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace("" active", "");
}
document.getElementById(tabsName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
</body>
<script>
document.getElementById("header").innerHTML = "The Weald School Smart Portal";
document.getElementById("header").style.color = "white";
</script>
</html>
Getting the errors:
Portal.htm:112 Uncaught SyntaxError: Unexpected identifier
Portal.htm:82 Uncaught ReferenceError: openTabs is not defined
at HTMLButtonElement.onclick (Portal.htm:82)
onclick @ Portal.htm:82
Portal.htm:83 Uncaught ReferenceError: openTabs is not defined
at HTMLButtonElement.onclick (Portal.htm:83)
onclick @ Portal.htm:83
Portal.htm:84 Uncaught SyntaxError: missing ) after argument list
Portal.htm:85 Uncaught SyntaxError: missing ) after argument list
Not sure why because everything looks right but I'm probably just being stupid lol.