Develop Reference

replace a div hidden intially by a click on a link from 3 other 3 linkes(3 other divs)

Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!

<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused

Trying to add a submit button and then it would display the "msg" - I am very new, just trying to cobble something together :)

I am not sure what i am doing exactly, but have some code that is working at the moment. I want to have a whole bunch of zip codes and when someone enters their zip and clicks submit it will return a message. Instead of the message just displaying as you type.
Any help is appreciated!
<!DOCTYPE html>
<html>
<body>
<h1 style="color:black; font-family: arial; font-size: 110%; ">Not sure if we deliver to your area?</h1>
<h2 style="color:black; font-family: arial; font-size: 90%; font-weight:40; ">Enter your zip code to find out.</h1>
<input type="text" id="zipCode" placeholder="ZIP code" onKeyUp="validateZip()"/>
<div id="msg" style="color:black; font-family: arial; font-size: 90%; font-weight:40; margin-top: 10px;"></div>
<script>
function checkIfAvailable(zip)
{
let zones = ["55075","55118","55115"]
return( zones.indexOf(zip) >= 0 )
}
function validateZip()
{
let zip = document.getElementById("zipCode").value;
let msg =""
if(checkIfAvailable(zip))
{
msg="We deliver to your area!";
}
else
{
msg="Sorry, we do not deliver to your area.";
}
document.getElementById("msg").innerHTML = msg;
}
</script>
</body>
</html>

Your script is working as expected here, currently you're running validateZip every time a key is pressed, because it's on the onKeyUp attribute of your input element.
To run this function when the submit button is clicked, run the script on the "onClick" attribute of a button.
For example:
<input type="text" id="zipCode" placeholder="ZIP code" />
<div id="msg" style="color:black; font-family: arial; font-size: 90%; font-weight:40; margin-top: 10px;"></div>
<button onclick="validateZip()">Submit</button>
This way it only runs once, not every time you press a key.

So, just added a eventListener to a button
<!DOCTYPE html>
<html>
<body>
<h1 style="color:black; font-family: arial; font-size: 110%; ">Not sure if we deliver to your area?</h1>
<h2 style="color:black; font-family: arial; font-size: 90%; font-weight:40; ">Enter your zip code to find out.</h2>
<input type="text" id="zipCode" placeholder="ZIP code" />
<button id="sendButton">Send</button>
<div id="msg" style="color:black; font-family: arial; font-size: 90%; font-weight:40; margin-top: 10px;"></div>
<script>
var button = document.getElementById("sendButton");
function checkIfAvailable(zip) {
let zones = ["55075", "55118", "55115"]
return (zones.indexOf(zip) >= 0);
}
button.addEventListener("click", function validateZip() {
let zip = document.getElementById("zipCode").value;
let msg = "";
if (checkIfAvailable(zip)) {
msg = "We deliver to your area!";
} else {
msg = "Sorry, we do not deliver to your area.";
}
document.getElementById("msg").innerHTML = msg;
});
</script>
</body>
</html>

setting localStorage for multiple items

I am having trouble setting up local storage to save the textArea input for each of the time blocks. I have commented out 3 different sections where I was playing with different techniques to try and make it work. However, I was not able to set it to save the text in local storage and get it so that it stay on the page when you revisit it. Please let me know if you can help me with a solution to fix it. I have provided a link to my repository. please look at the feature/calendar branch because that is where my code resides. I also snippet the code into here for you to look at. I am new to coding so please be patient with me. I am still learning the terminology and different ways to reach the objective/goal.
saveBtn = document.getElementsByClassName('saveBtn');
// creates a new instance for time and date.
const currentDay = luxon.DateTime.now().toLocaleString(luxon.DateTime.DATETIME_MED);
// format's the date and time.
var newFormat = {
// The selected date format from luxon documentation.
...luxon.DateTime.DATETIME_MED,
// added the day of the week.
weekday: 'long'
};
// creates a new instance for time and date.
const newCurrentDay = luxon.DateTime.now().toLocaleString(newFormat);
// checks if time works.
// creates a new instance to parse the date and time into the header html.
var ol = document.querySelector('header');
// creates the ol element.
const list = document.createElement('ol');
// styles the <ol> element.
list.setAttribute('style', 'color: white; background-color: black; display: flex; flex-direction: column; justify-content: center; align-items: center;');
// displays newCurrentDay variable in the header as readable text.
list.innerText = newCurrentDay;
// appends the newCurrentDay variable to the ol element.
ol.appendChild(list);
// creates an array to change the blocks bases on their time in the text area element.
const timeBlocks = Array.from(document.getElementsByClassName('description'));
// assigning timeBlocks based on time.
for (var i = 0; i < timeBlocks.length; i++) {
// gets the current hour to connect the color changing feature in the text area element based on the 24hr format.
const now = luxon.DateTime.now().hour.toLocaleString();
// if statement's to change the color of the blocks based on time using the 24hr time format.
if (timeBlocks[i].id < now) {
timeBlocks[i].classList.add('past');
}
if (timeBlocks[i].id > now) {
timeBlocks[i].classList.add('future');
}
if (timeBlocks[i].id === now) {
timeBlocks[i].classList.add('present');
}
}
// // * testing
// saveBtn = document.getElementsByClassName('saveBtn');
// var save = addEventListener('click', function () {
// // creates a new instance to parse the date and time into the header html.
// var textarea = document.querySelector('textarea');
// this.window.localStorage.setItem('textarea', textarea.value);
// this.window.localStorage.getItem('textarea');
// });
// TODO: can use save button for event text to persist even when refreshed.
// $('.saveBtn').on("click", function () {
// window.localStorage.setItem('task', $(this).siblings('.description').val());
// })
// loadTask = function () {
// return window.localStorage.getItem('task');
// }
// let taskArray = [{
// 21: "",
// 22: "",
// 23: "",
// }];
// $('.saveBtn').on("click", function () {
// window.localStorage.setItem('tasks', JSON.stringify(taskArray));
// JSON.parse(window.localStorage.getItem('tasks'));
// var storedData = window.localStorage.getItem(taskArray);
// if (storedData) {
// taskArray = JSON.parse(storedData);
// alert(taskArray);
// }
// });
// TODO: event is saved into time block using local storage
// TODO: have my minutes actively change.
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1;
}
textarea {
background: transparent;
border: none;
resize: none;
color: #000000;
border-left: 1px solid black;
padding: 10px;
}
.jumbotron {
text-align: center;
background-color: transparent;
color: black;
border-radius: 0;
border-bottom: 10px solid black;
}
.description {
white-space: pre-wrap;
}
.time-block {
text-align: center;
border-radius: 15px;
}
.row {
white-space: pre-wrap;
height: 80px;
border-top: 1px solid white;
;
}
.hour {
background-color: #ffffff;
color: #000000;
border-top: 1px dashed #000000;
}
.past {
background-color: #d3d3d3;
color: white;
}
.present {
background-color: #ff6961;
color: white;
}
.future {
background-color: #77dd77;
color: white;
}
.saveBtn {
border-left: 1px solid black;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
background-color: #06AED5;
color: white;
}
.saveBtn i:hover {
font-size: 20px;
transition: all .3s ease-in-out;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"
integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="./assets/css/style.css" />
<title>Work Day Scheduler</title>
</head>
<body>
<header class="jumbotron">
<h1 class="display-3">Work Day Scheduler</h1>
<p class="lead">A simple calendar app for scheduling your work day</p>
<p id="currentDay" class="lead"></p>
</header>
<div class="container">
<!-- Time blocks go here -->
<div class="row">
<div class="col-2 border-top border-dark">
9:00PM
</div>
<textarea class="description col-8" id="21">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
10:00PM
</div>
<textarea class="description col-8" id="22">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
11:00PM
</div>
<textarea class="description col-8" id="23">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
12:00AM
</div>
<textarea class="description col-8" id="0">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<!-- <div class="row">
<div class="col-2 border-top border-dark">
1:00PM
</div>
<textarea class="description col-8" id="13">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
2:00PM
</div>
<textarea class="description col-8" id="14">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
3:00PM
</div>
<textarea class="description col-8" id="15">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
4:00PM
</div>
<textarea class="description col-8" id="16">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div>
<div class="row">
<div class="col-2 border-top border-dark">
5:00PM
</div>
<textarea class="description col-8" id="17">Event</textarea>
<button class="btn saveBtn col-2"><i class="fas fa-save"></i></button>
</div> -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/luxon#2.3.1/build/global/luxon.min.js"></script>
<script src="/assets/javascript/script.js"></script>
</body>
</html>

I don't follow which of this code you are expecting to do what, so I will comment on the problems of each.
this.window.localStorage.getItem('textarea');
This line doesn't really do anything. You're getting the value, but not using it anywhere.
loadTask = function () {
return window.localStorage.getItem('task');
}
Nothing calls this function, so that doesn't do anything either.
JSON.parse(window.localStorage.getItem('tasks'));
Again, here, you're not doing anything with the return value, so it goes nowhere.
However, I was not able to set it to save the text in local storage and get it so that it stay on the page when you revisit it.
You need to load data out of localStorage when DOMContentLoaded is fired. Use your browser's developer tools to first ensure that the data you want is getting saved. Then, when the page is loaded, fetch the data and populate the form as you see fit.

Cannot read property 'innerHTML' of null using Tabbis

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Tabbis</title>
<link rel="stylesheet" href="../assets/css/dist/style-default.css">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
/* Reset */
#import url('https://fonts.googleapis.com/css?family=Quicksand:600&display=swap');
* {
margin: 0;
font-family: quicksand;
}
body {
padding: 4rem;
background: #eee;
#media screen and (max-width: 460px) {
padding: 0;
}
}
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: blue;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: transparent;
padding: 5px;
right: 0;
/*border: 1px dashed gray;*/
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 50px;
left: 500px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
</head>
<body>
<div data-tabs>
<button>INDEX</button>
<button>NORTH</button>
<button>SOUTH</button>
<button>EXTENSION</button>
</div>
<div data-panes>
<!-- Index Tab -->
<div>INDEX</div>
<!-- North Tab -->
<div>
<!-- NE Tabs -->
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TN</button>
</div>
<div data-panes>
<div>
<div data-tabs>
<button>DNE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
<div data-panes>
<button>DNE JPGs HERE</button>
<button>HNE</button>
<button>KNE</button>
<button>ENE</button>
<button>WNE</button>
<button>ANE</button>
<button>QNE</button>
<button>BNE</button>
<button>SNE</button>
<button>FNE</button>
<button>XNE</button>
<button>NNE</button>
<button>CNE</button>
<button>ACN</button>
<button>YNE</button>
<button>PB3</button>
</div>
</div>
<!-- NW Tabs -->
<div>
<div data-tabs>
<button>DNW</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
<div data-panes>
<button>DNW JPGs HERE</button>
<button>HNW</button>
<button>KNW</button>
<button>ENW</button>
<button>WNW</button>
<button>ANW</button>
<button>QNW</button>
<button>BNW</button>
<button>SNW</button>
<button>FNW</button>
<button>XNW</button>
<button>NNW</button>
<button>CNW</button>
<button>ACN</button>
<button>YNW</button>
<button>PB1</button>
</div>
</div>
<!-- TN Tab -->
<div>Pane TN</div>
</div>
</div>
<!-- SOUTH -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TS</button>
</div>
<div data-panes>
<!-- SE Tabs -->
<div>
<div data-tabs>
<button>DSE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
<div data-panes>
<button>DSE JPGs HERE</button>
<button>HSE</button>
<button>KSE</button>
<button>ESE</button>
<button>WSE</button>
<button>ASE</button>
<button>QSE</button>
<button>BSE</button>
<button>SSE</button>
<button>FSE</button>
<button>XSE</button>
<button>NSE</button>
<button>CSE</button>
<button>ACS</button>
<button>YSE</button>
<button>PB4</button>
</div>
</div>
<!-- SW Tabs -->
<div>
<div data-tabs>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
<div data-panes>
<button>DSW</button>
<button>HSW</button>
<button>KSW</button>
<button>ESW</button>
<button>WSW</button>
<button>ASW</button>
<button>QSW</button>
<button>BSW</button>
<button>SSW</button>
<button>FSW</button>
<button>XSW</button>
<button>NSW</button>
<button>CSW</button>
<button>ASN</button>
<button>YSW</button>
<button>PB2</button>
</div>
</div>
<!-- TS Tab -->
<div>Pane TS</div>
</div>
</div>
<!-- EXTENSION -->
<div>
<div data-tabs>
<button>EAST</button>
<button>WEST</button>
<button>TSX</button>
</div>
<div data-panes>
<!-- SEX Tabs -->
<div>
<div data-tabs>
<button onclick="onClick()">DSEX</button>
<button onclick="onClick()">HSEX</button>
<button onclick="onClick()">KSEX</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
<div data-panes>
<button>
<div id="dsex">DSEX</div>
</button>
<button>
<div id="hsex>">HSEX</div>
</button>
<button>
<div id="ksex>"></div>
</button>
<button>ESEX</button>
<button>WSEX</button>
<button>ASEX</button>
<button>QSEX</button>
<button>BSEX</button>
<button>SSEX</button>
<button>FSEX</button>
<button>XSEX</button>
<button>NSEX</button>
<button>CSEX</button>
<button>ACSX</button>
<button>YSEX</button>
<button>PB8</button>
</div>
</div>
<!-- SWX Tabs -->
<div>
<div data-tabs>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
<div data-panes>
<button>DSWX</button>
<button>HSWX</button>
<button>KSWX</button>
<button>ESWX</button>
<button>WSWX</button>
<button>ASWX</button>
<button>QSWX</button>
<button>BSWX</button>
<button>SSWX</button>
<button>FSWX</button>
<button>XSWX</button>
<button>NSWX</button>
<button>CSWX</button>
<button>ASNX</button>
<button>YSWX</button>
<button>PB6</button>
</div>
</div>
<!-- TSX Tab -->
<div>Pane TS</div>
</div>
</div>
<script src='script.js'></script>
</div>
<script src="../assets/js/dist/tabbis.es6.js"></script>
<script>
tabbis({
memory: true
});
</script>
</body>
</html>
var elementaries = '../assets/elementaries/';
var elemLoc = [];
var dsex = [
"this.jpg",
"that.jpg"
];
var hsex = [
"this.jpg",
"that.jpg"
];
// ON click of quadrant (DSEX...) do this
function onClick() {
let id = event.srcElement.id; // returns the id of the button (tab 8-0)
let quadrant = document.getElementById(`${id}`).innerHTML.toLowerCase(); // returns the value of the button ie DSEX
getElemLoc(quadrant); // calls function to make an array of elementaries based on quadrant
loadElementaries(quadrant); // loads elementaries under proper tab
}
// Function makes an array of elementaries based on quadrant
var getElemLoc = (q) => {
elemLoc = [];
let elem = window[q];
elem.forEach(function (img) {
let loc = `${elementaries}${q}/${img}`;
elemLoc.push(loc);
})
};
// Loads elementaries to proper div based on quadrant.
var loadElementaries = (quad) => {
for (var i = 0; i < elemLoc.length; i++) {
document.getElementById(`${quad}`).innerHTML = document.getElementById(`${quad}`).innerHTML + `<a class="thumbnail" href="${elemLoc[i]}"><img src="${elemLoc[i]}" width="350px" height="250px" border="0" /><span><img src="${elemLoc[i]}" width="900" height="700" /><br /></span></a> <br />`;
}
};
When going to the tab Extension/East/DSEX my innerhtml code works perfectly, but if I try the hsex tab the inner html in loadElementaries fails. Does anyone have any idea what's going on. Maybe the way the DOM is loading between tabs?
document.getElementById(`${quad}`).innerHTML works for dsex tab but not hsex...
I'm at work so I'm limited to using client side JS/HTML/CSS so nodejs isn't an option unfortunately.

Javascript manipulate HTML string

I have a string like this:
<!-- Offer Conversion: godaddy --> <iframe src="http://example.go2cloud.org/aff_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe> <!-- // End Offer Conversion -->
godaddy
Now I wanna to toggle some parameter into src attribute based on a javascript event.
please see the JsFiddle

To manipulate HTML in string create empty element and set it's content with string. Later do what you want.
var string = '<!-- Offer Conversion: godaddy --> <iframe src="http://example.go2cloud.org/usr_l?offer_id=90" scrolling="no" frameborder="0" width="1" height="1"></iframe> <!-- // End Offer Conversion -->';
$('input').change(function() {
var content = $('<div>');
content.html(string);
var iFrameSrc = content.find('iframe').attr('src');
if ($('#e1').is(':checked')) {
iFrameSrc += '&e1='+$('#e1').val();
}
if ($('#e2').is(':checked')) {
iFrameSrc += '&e2='+$('#e2').val();
}
content.find('iframe').attr('src', iFrameSrc);
$('#result').show().text(content.html().replace(/&/g, '&'));
});
#result {
margin-top: 50px;
background: #dcfffb;
color: #044f47;
padding: 10px;
font-size: 1em;
font-family: monospace !important;
text-align: left;
direction: ltr;
border: 1px dotted #9dd3cd;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input id="e1" type="checkbox" value="someValue1"/>
<label for="e1">firstParam</label>
</div>
<div>
<input id="e2" type="checkbox" value="someValue2"/>
<label for="e2">secondParam</label>
</div>
<div id="result"></div>