We Keep Coding

When click button change text in code tag

I'm trying to make a code box you can see in image . My question is how can ı change code in code tag when click another language button ?
<div class="container">
<div class="row align-items-center py-1">
<div class="embedcontainer">
<button class="language">JavaScript</button>
<button class="language">PHP</button>
<div class="code-wrapper">
<pre>
<code id="code">
function fibonacci(num)<br/> {<br/> var num1=0;<br/> var num2=1;<br/> var sum;<br/> var i=0;<br/> for (i = 0; i < num; i++)<br/> {<br/> sum=num1+num2;<br/> num1=num2;<br/> num2=sum;<br/> }<br/> return num2;<br/> }<br/> <br/> console.log(fibonacci(155));
</pre>
<button id="copy-button">Copy</button>
</div>
<span id="copy-success">Code copied!</span>
</div>
</div>
</div>

You have to put some Javascript code. If click on JavaScript tab, display none PHP tab data and if click on PHP tab, display none the Javascript tab data.
Here down is code:
function openTab(evt, languageName) {
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(languageName).style.display = "block";
evt.currentTarget.className += " active";
}
.tab {
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;
}
<div class="container">
<div class="row align-items-center py-1">
<div class="embedcontainer">
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'JavaScript')">JavaScript</button>
<button class="tablinks" onclick="openTab(event, 'PHP')">PHP</button>
</div>
<div id="JavaScript" class="tabcontent">
<pre>
<code id="code">
JavaScript code
</code>
</pre>
<button id="copy-button">Copy</button>
</div>
<div id="PHP" class="tabcontent">
<pre>
<code id="code">
PHP code
</code>
</pre>
<button id="copy-button">Copy</button>
</div>
</div>
</div>
</div>

Can anyone show me why my modals aren't opening

To see the modal button, fill out the input fields and select a day to output to
I grabbed the modal and the "todo" functionality from w3schools.com and changed some of the ids and classes. I've been looking through everything for a while and I can't seem to find the issue. I just need another pair of eyes on it.
var submitBtn = document.querySelector("#submitBtn");
submitBtn.addEventListener("click", function(){
event.preventDefault();
var boxSelect = document.querySelector("#boxSelect");
document.querySelector(`#b${boxSelect.value}NameOutput`).innerHTML = "<p>"+document.querySelector("#name").value+"</p>";
document.querySelector(`#b${boxSelect.value}UserOutput`).innerHTML = "<p>"+document.querySelector("#user").value+"</p>";
document.querySelector(`#b${boxSelect.value}LinkOutput`).innerHTML = "<p><a target='_blank' href='"+document.querySelector('#link').value+"'>Click Here for Recipe</a></p>";
document.querySelector(`#myBtn${boxSelect.value}`).style.display = "block";
});
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.querySelector(`#myBtn${boxSelect.value}`);
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Create a "close" button and append it to each list item
var myNodelist = document.getElementsByTagName("LI");
var i;
for (i = 0; i < myNodelist.length; i++) {
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
myNodelist[i].appendChild(span);
}
// Click on a close button to hide the current list item
var close = document.getElementsByClassName("close");
var i;
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
// Add a "checked" symbol when clicking on a list item
var list = document.querySelector('ul');
list.addEventListener('click', function(ev) {
if (ev.target.tagName === 'LI') {
ev.target.classList.toggle('checked');
}
}, false);
// Create a new list item when clicking on the "Add" button
function newElement() {
var li = document.createElement("li");
var inputValue = document.getElementById("myInput").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
if (inputValue === '') {
alert("You must write something!");
} else {
document.getElementById("myUL").appendChild(li);
}
document.getElementById("myInput").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
li.appendChild(span);
for (i = 0; i < close.length; i++) {
close[i].onclick = function() {
var div = this.parentElement;
div.style.display = "none";
}
}
}
.square{
border: 1px solid black;
width: 15rem;
height: 15rem;
float: left;
margin:10px;
}
#formContainer {
position: relative;
float: left;
}
.boxTitle {
text-align: center;
margin-top: 1em;
}
.boxOutputContainer {
text-align: center;
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.myBtn {
display: none;
}
/* Remove margins and padding from the list */
ul {
margin: 0;
padding: 0;
text-align: center;
}
/* Style the list items */
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
/* make the list items unselectable */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Set all odd list items to a different color (zebra-stripes) */
ul li:nth-child(odd) {
background: #f9f9f9;
}
/* Darker background-color on hover */
ul li:hover {
background: #ddd;
}
/* When clicked on, add a background color and strike out text */
ul li.checked {
background: #888;
color: #fff;
text-decoration: line-through;
}
/* Add a "checked" mark when clicked on */
ul li.checked::before {
content: '';
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
/* Style the close button */
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f44336;
color: white;
}
/* Style the header */
.header {
background-color: black;
padding: 30px 40px;
color: white;
text-align: center;
}
/* Clear floats after the header */
.header:after {
content: "";
display: table;
clear: both;
}
/* Style the input */
#myInput {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
/* Style the "Add" button */
.addBtn {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.addBtn:hover {
background-color: #bbb;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row col-sm-12">
<div class="square">
<h1 class="boxTitle">Sunday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b1NameOutput"></div>
<div class="outputItem" id="b1UserOutput"></div>
<div class="outputItem" id="b1LinkOutput"></div>
<button class="myBtn" id="myBtn1">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Monday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b2NameOutput"></div>
<div class="outputItem" id="b2UserOutput"></div>
<div class="outputItem" id="b2LinkOutput"></div>
<button class="myBtn" id="myBtn2">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Tuesday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b3NameOutput"></div>
<div class="outputItem" id="b3UserOutput"></div>
<div class="outputItem" id="b3LinkOutput"></div>
<button class="myBtn" id="myBtn3">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Wednesday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b4NameOutput"></div>
<div class="outputItem" id="b4UserOutput"></div>
<div class="outputItem" id="b4LinkOutput"></div>
<button class="myBtn" id="myBtn4">Open Modal</button>
</div>
</div>
</div>
<div class="row col-lg-12">
<div class="square">
<h1 class="boxTitle">Thursday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b5NameOutput"></div>
<div class="outputItem" id="b5UserOutput"></div>
<div class="outputItem" id="b5LinkOutput"></div>
<button class="myBtn" id="myBtn5">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Friday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b6NameOutput"></div>
<div class="outputItem" id="b6UserOutput"></div>
<div class="outputItem" id="b6LinkOutput"></div>
<button class="myBtn" id="myBtn6">Open Modal</button>
</div>
</div>
<div class="square">
<h1 class="boxTitle">Saturday</h1>
<div class="boxOutputContainer">
<div class="outputItem" id="b7NameOutput"></div>
<div class="outputItem" id="b7UserOutput"></div>
<div class="outputItem" id="b7LinkOutput"></div>
<button class="myBtn" id="myBtn7">Open Modal</button>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div id="myDIV" class="header">
<h2>My To Do List</h2>
<input type="text" id="myInput" placeholder="Title...">
<span onclick="newElement()" class="addBtn">Add</span>
</div>
<ul id="myUL"></ul>
</div>
</div>
<div class="row">
<div id="formContainer">
<form>
<label for="name">Recipe name:</label>
<input required type="text" id="name">
<label for="user">Who's making it?</label>
<input required type="text" id="user">
<label for="link">Recipe Link</label>
<input type="text" id="link">
<label for="boxSelect">Which day?</label>
<select id="boxSelect">
<option value="1">Sunday</option>
<option value="2">Monday</option>
<option value="3">Tuesday</option>
<option value="4">Wednesday</option>
<option value="5">Thursday</option>
<option value="6">Friday</option>
<option value="7">Saturday</option>
</select>
<input type="submit" id="submitBtn">
</form>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js">
</script>
</body>
</html>

It is because you said btn.onclick to show the modal but you never defined btn. It should be submitBtn.onclick.
I have a jsfiddle link because it doesn't work on a snippet properly:
https://jsfiddle.net/nukeboy212/7yj0rhsL/8/

The solution is that these code must be in event listener of submit button.
You want to select the Open Modal button only after you clicked the submit button and add the onClick function immediately after:
var boxSelect = document.querySelector("#boxSelect");
var btn = document.querySelector(`#myBtn${boxSelect.value}`);
btn.onclick = function () {
modal.style.display = "block";
};

Rotate through simple vertical tab menu content on timer

I'm using w3schools's vertical tab menu to create a "How it works" menu like this: https://www.canva.com/graphs/
How can I loop through each tab to show the tabcontent div on a timer (while still letting users click the tabs and manually navigate)?
Thank you for any help!
The code from w3schools's vertical tabs:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
function openCity(evt, cityName) {
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
</script>
</body>
</html>

You could use setTimeout to create a timer that will move your tabs. Here is the updated code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
</style>
</head>
<body>
<h2>Vertical Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>
<div class="tab">
<button class="tablinks london" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks paris" onclick="openCity(event, 'Paris')">Paris</button>
<button class="tablinks tokyo" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
<script>
// Create a list of classes for each button
var cities = ["london", "paris", "tokyo"];
var cityIndex = 0;
// Time in miliseconds for the rotation
var rotationInterval = 2000;
// This will find the correct button, click on it, and move to the next one
function rotateCity(index) {
var currentCityButton = document.querySelector("." + cities[index]);
currentCityButton.click();
// Recursive call
setTimeout(function(){
if (cityIndex < 2) {
cityIndex++;
} else {
cityIndex = 0;
}
rotateCity(cityIndex);
}, rotationInterval);
}
function openCity(evt, cityName) {
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// Start rotation
rotateCity(cityIndex)
</script>
</body>
</html>
And this is a working example.

vertical navigation on hover change image

I am struggling to find a simple solution to create an div-navigation like this:
https://www.bueromoebel-experte.de/
The div with image on the right changes on hover of the left menu (and keeps the div, even if you go somewhere else with your mouse). But the left menu itself, when its clicked is linking to another page.
Must be sth like:
<ul>
<li> <a id="link1" href="example.de/abc" target="_blank">example 1</a></li>
<li> <a id="link2" href="example.de/def" target="_blank">example 2</a></li>
<li> <a id="link3" href="example.de/ghi" target="_blank">example 3</a></li>
</ul>
<div id="example1" class="hide"> Image, Text and Button</div>
<div id="example2" class="hide"> Image, Text and Button</div>
<div id="example3" class="hide"> Image, Text and Button</div>
CSS
.hide {
position: absolute;
}
#example1 {
z-index: 50;
}
#example3, #example2 {
z-index: 10;
}
JS
$("HOVEREDLINK").hover(function() {
$("HOVEREDLINK").css("z-index","70")
$("ALLOTHERIDS").css("z-index","50")
});
As a beginner I am not quite sure how to do so or if it is a good solution. I would be really gratefull if you guys could help me. Thank you very much!

Try something like this
function openCity(evt, cityName) {
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(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
* {box-sizing: border-box}
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
float: left;
border: 1px solid #ccc;
background-color: #f1f1f1;
width: 30%;
height: 300px;
}
/* Style the buttons inside the tab */
div.tab button {
display: block;
background-color: inherit;
color: black;
padding: 22px 16px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current "tab button" class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
float: left;
padding: 0px 12px;
border: 1px solid #ccc;
width: 70%;
border-left: none;
height: 300px;
}
<!DOCTYPE html>
<html>
<body>
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'London')" id="defaultOpen">London</button>
<button class="tablinks" onmouseover="openCity(event, 'Paris')">Paris</button>
<button class="tablinks" onmouseover="openCity(event, 'Tokyo')">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
</div>
<script>
document.getElementById("defaultOpen").onmouseover();
</script>
</body>
</html>

Javascript trying to implement history API

So, I am trying to store a history.go(-1) into a variable to use in a function, yet when I execute it, it gives the error
unable to read style.
I am using CSS for the animations and to show only one block of content at a time.
function openChoice(evt, choiceName) {
var i, tabcontent, tablinks, last;
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(choiceName).style.display = "block";
evt.currentTarget.className += " active";
history.pushState(null, null, choiceName.split('/').pop());
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
var bbac = history.go(-1);
body {
font-family: "Haveltica", sans-serif;
}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
choice {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* 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.3s;
font-size: 17px;
}
.tablinks {
background-color: #f44336;
border: none;
color: G;
font-weight: bold;
padding: 10px 22px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 8px;
}
/* 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;
border: 1px solid #ccc;
border-top: none;
}
.tabcontent {
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
/* Fading effect takes 1 second */
}
#-webkit-keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#keyframes fadeEffect {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<div class="tab">
<button class="tablinks" onclick="openChoice(event, 'Slide1')" id="defaultOpen">Reset</button>
<button class="tablinks" onclick="openChoice(event, bbac)">Back</button>
</div>
<!-- Enter KBA info in the next line add tabcontent to class="tabcontent" of div-->
<div id="Slide1" class="tabcontent">
<h3>Title</h3>x
<p>
CONTENT OF SLIDE<br /><br />
<button class="tablinks" onclick="openChoice(event, 'Slide2')">Slide2</button> <br /><br />
<button class="tablinks" onclick="openChoice(event, 'Slide3')">Slide3</button> <br /><br />
</p>
</div>
<div id="Slide2" class="tabcontent">
<h3>Title 2</h3>
<p>
<h4>Having fun?</h4>
</p>
</div>
<div id="Slide3" class="tabcontent">
<h3>Title 3</h3>
<p>
<i>Image</i>
<img src="null" />
</p>
</div>
Here is an example of what I have so far:
http://kbadesigner.tvgesports.com/TEST%20KBA25.html
What I am trying to accomplish is the back button to return to the previous slide selected.
Thanks,

The actual error is not "unable to read style." It is:
null is not an object (evaluating 'document.getElementById(choiceName).style')
choiceName is supposed to be a DOM ID, but you've actually put this into it instead:
var bbac = history.go(-1);
...which naturally returns null when you try to call document.getElementById on it.
Here's a rewrite of your code which uses an array of IDs rather than the window history object. (You tagged the question with jquery so I've used that for convenience:)
var pastSlides = [];
var prevSlide = function() {
if (pastSlides.length == 0) return;
$('.tabcontent').hide();
$('#'+pastSlides.pop()).show();
}
var openSlide = function(slide) {
pastSlides.push($('.tabcontent:visible').attr("id"));
$('.tabcontent').hide();
$('#'+slide).show();
}
var resetSlides = function() {
pastSlides = [];
$('.tabcontent').hide();
$('#Slide1').show();
}
resetSlides();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab">
<button class="tablinks" onclick="resetSlides()" id="defaultOpen">Reset</button>
<button class="tablinks" onclick="prevSlide()">Back</button>
</div>
<div id="Slide1" class="tabcontent">
<h3>Title</h3>
<p>CONTENT OF SLIDE</p>
<button class="tablinks" onclick="openSlide('Slide2')">Two</button>
<button class="tablinks" onclick="openSlide('Slide3')">Three</button>
</div>
<div id="Slide2" class="tabcontent">
<h3>Title 2</h3>
<h4>Having fun?</h4>
<button class="tablinks" onclick="openSlide('Slide1')">One</button>
<button class="tablinks" onclick="openSlide('Slide3')">Three</button>
</div>
<div id="Slide3" class="tabcontent">
<h3>Title 3</h3>
<p><i>Image</i></p>
<button class="tablinks" onclick="openSlide('Slide1')">One</button>
<button class="tablinks" onclick="openSlide('Slide2')">Two</button>
</div>