We Keep Coding

Why is the div inside not load inside the a tag?

I am trying to make a slideshow inside of an accordion, however when I load the code into the browser, the content inside the <a> is beside it, not inside it. Is there any solution to it? The main problem is that when I load the code to debug the <div class="grid2 transition" id="grid4"> is supposed to be inside of <a onclick="openUp4()" class="pane1 button" id="pane4">, however it loads just side by side.
let slideIndex = [1, 1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no] - 1].style.display = "block";
}
function openUp4() {
var element = document.getElementById("pane4");
element.classList.toggle("active2")
if (element.classList.contains("active2")) {
// document.getElementById("grid2").style.visibility = "visible";
document.getElementById("grid4").style.opacity = 1;
} else {
// document.getElementById("grid2").style.visibility = "hidden";
document.getElementById("grid4").style.opacity = 0;
}
}
.pane1 {
background-color: white;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
text-align: center;
font-size: 20px;
transition: 0.4s;
}
.active2 {
height: fit-content;
}
.grid2 {
display: grid;
gap: 0rem;
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
height: inherit;
justify-content: center;
place-items: center;
overflow: hidden;
}
.blacktitle {
color: #ffffff;
position: absolute;
background-color: #191919;
height: 70px;
width: 50%;
left: -20px;
top: -45px;
border-radius: 10px;
padding: 21px;
letter-spacing: 6px;
}
.mySlides1 {
display: none
}
img {
vertical-align: middle;
max-width: 400px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
}
video {
max-width: 400px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
margin-top: 40%;
}
/* Slideshow container */
.slideshow-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 400px;
max-width: 400px;
position: relative;
margin: 40px auto auto auto;
}
.videocontainer {
position: relative;
height: 533.333px;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover,
.next:hover {
background-color: #f1f1f1;
color: black;
}
<a onclick="openUp4()" class="pane1 button" id="pane4">
<div class="blacktitle">
Concerts
</div>
<div class="grid2 transition" id="grid4">
<div class="slideshow-container">
<div class="mySlides1">
<img src="Concerts/a03c3e49-cdff-4382-87c1-b473de9f6447.jpg" style="width:100%">
</div>
<div class="mySlides1">
<img src="Concerts/IMG_6847.png" style="width:100%">
</div>
<div class="mySlides1 videocontainer">
<video controls preload="metadata">
<source src="Concerts/IMG_5888.mov" type="video/mp4" style="width:100%">
</video>
</div>
<a class="prev" onclick="plusSlides(-1, 0)">❮</a>
<a class="next" onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</a>

I must admit I'm having a little trouble understanding the question, but from your code, 2 things pop up immediately:
The first is the usage of <div> inside <a>. You should never use a block element (like div, h1, p, etc) inside an inline element (like a,span,strong, etc). Some browsers might be able to parse it but this is definitely invalid HTML.
A solution to that would be to replace the <div> elements inside the anchor tag with <span> instead, and add a display:block CSS rule to the relevant <span> tags so they mimic how the <div> looks like.
The second issue is around this line:
x[slideIndex[no] - 1].style.display = "block";
x[slideIndex[no] - 1] does not always return an element, so you cannot assume you can access its style property. A safer way to do it would be this:
// Get the element first
const el = x[slideIndex[no] - 1];
// If it exists, *then* access and mutate its properties.
if(el) el.style.display = "block";

I fixed it this works:
<div class="pagebody">
<div class="container">
<div class="flex-container">
<div class="pane1 button" id="pane4">
<span onclick="openUp4()" class="blacktitle">
Concerts
</span>
<span class="grid2 transition" id="grid4">
<span class="slideshow-container">
<span class="mySlides1">
<div style="width: 400px; height: 533px; background-color:"></div>
</span>
<span class="mySlides1">
<div style="width: 400px; height: 533px; background-color: green"></div>
</span>
<span class="mySlides1">
<div style="width: 400px; height: 533px; background-color: blue"></div>
</span>
<button class="prev" onclick="plusSlides(-1, 0)">❮</button>
<button class="next" onclick="plusSlides(1, 0)">❯</button>
</span>
</span>
</div>
</div>
</div>
</div>
<style>
.blacktitle:hover {
background-color: #555555;
}
.blacktitle {
color: #ffffff;
position: absolute;
background-color: #191919;
height: 70px;
width: 50%;
left: -20px;
top: -45px;
border-radius: 10px;
padding: 21px;
letter-spacing: 6px;
z-index: 10;
}
.transition {
opacity: 0;
transition: opacity 0.5s linear;
}
.grid2 {
display: grid;
gap: 0rem;
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
height: inherit;
justify-content: center;
place-items: center;
overflow: hidden;
}
.active2 {
height: 600px;
}
.pane1 {
background-color: white;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
text-align: center;
font-size: 20px;
transition: 0.4s;
}
.container {
padding: 0px 60px 60px 60px;
background-color: #191919;
max-width: 1000px;
min-width: 800px;
width: 100%; }
.flex-container {
display: flex;
justify-content: center;
align-items: top;
flex-direction: column;
margin-top: 60px;
}
.pagebody {
background-color: #191919;
margin: 0;
display: flex;
justify-content: center;
}
.mySlides1 {display: none; overflow: hidden;}
img {vertical-align: middle; max-width: 400px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border-radius: 5px;}
video {max-width: 400px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border-radius: 5px; margin-top: 40%;}
/* Slideshow container */
.slideshow-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 400px;
max-width: 400px;
position: relative;
margin: 40px auto auto auto;
}
.videocontainer {
position: relative;
height: 533.333px;
}
/* Next & previous buttons */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background:none;
border:none;
cursor: pointer;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
function openUp4(){
var element = document.getElementById("pane4");
element.classList.toggle("active2")
if (element.classList.contains("active2")) {
// document.getElementById("grid2").style.visibility = "visible";
document.getElementById("grid4").style.opacity = 1;
} else {
// document.getElementById("grid2").style.visibility = "hidden";
document.getElementById("grid4").style.opacity = 0;
}
}
let slideIndex = [1,1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] += n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
const el = x[slideIndex[no] - 1];
if(el){el.style.display = "block";}
}
}

How to make image slider respond to thumb swipe

Hi I am using the basic W3 slideshow layout but It is not very good for the mobile version of my site.
I searched very hard to find a solution to this but it's always download some plug-in to make it work or something that doesn't respond very well to swipes
$('.slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).one('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
$(this).slider('next');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
$(this).slider('prev');
}
});
$(this).on('touchend', function() {
$(this).off('touchmove');
});
});
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>

Even though this is not pure Js and it is a different approach
I found that flickity.js and css is good for mobile and it's just 2 ajax calls like jquery
https://flickity.metafizzy.co/api.html
<script src="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.pkgd.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/flickity/1.0.0/flickity.css">
HTML
<div class="carousel">
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
<div class="carousel-cell"></div>
</div>
CSS
/* external css: flickity.css */
* { box-sizing: border-box; }
body { font-family: sans-serif; }
.carousel {
background: #FAFAFA;
}
.carousel-cell {
width: 28%;
height: 200px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: carousel-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(carousel-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.button {
font-size: 22px;
}
.button-group {
margin-bottom: 20px;
}
Js
// external js: flickity.pkgd.js
var flkty = new Flickity( '.carousel', {
groupCells: true
});
var buttonGroup = document.querySelector('.button-group');
var buttons = buttonGroup.querySelectorAll('.button');
buttons = fizzyUIUtils.makeArray( buttons );
buttonGroup.addEventListener( 'click', function( event ) {
// filter for button clicks
if ( !matchesSelector( event.target, '.button' ) ) {
return;
}
var index = buttons.indexOf( event.target );
flkty.selectCell( index );
});

Like i wrote in the comments, you have two typos: $(this).one('touchmove and .slider, which has to be $(this).on('touchmove and #slider.
But the main problem is your function slider(), which isn't defined. But you can use the function plusSlides(), that you are already using for the next and prev buttons.
Furthermore the touchmove event is firing very often until the touchend event is fired. Therefor the function plusSlides() is called multiple times. To fix this, stop the touchmove event listener when the function plusSlides() is called.
Working example:
$('#slider').on('touchstart', function(event) {
const xClick = event.originalEvent.touches[0].pageX;
$(this).on('touchmove', function(event) {
const xMove = event.originalEvent.touches[0].pageX;
const sensitivityInPx = 5;
if (Math.floor(xClick - xMove) > sensitivityInPx) {
plusSlides(1);
$(this).off('touchmove');
}
else if (Math.floor(xClick - xMove) < -sensitivityInPx) {
plusSlides(-1);
$(this).off('touchmove');
}
});
});
let slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex - 1].style.display = "block";
dots[slideIndex - 1].className += " active";
}
* {
box-sizing: border-box
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.mySlides {
display: none
}
img {
vertical-align: middle;
}
/* Slideshow container */
.slideshow-container {
padding: 10px;
max-width: 1000px;
position: relative;
margin: auto;
-webkit-overflow-scrolling: touch;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Caption text */
.text {
color: #f2f2f2;
font-size: 15px;
padding: 8px 12px;
position: absolute;
bottom: 8px;
width: 100%;
text-align: center;
}
/* Number text (1/3 etc) */
.numbertext {
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
position: absolute;
top: 0;
}
/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active,
.dot:hover {
background-color: #717171;
}
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
#keyframes fade {
from {
opacity: .4
}
to {
opacity: 1
}
}
/* On smaller screens, decrease text size */
#media only screen and (max-width: 300px) {
.prev,
.next,
.text {
font-size: 11px
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slider" class="slideshow-container">
<!-- images -->
<div class="mySlides fade">
<!-- <div class="numbertext">1 / 3</div> -->
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="http://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<div style="text-align:center">
<!-- dots-->
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="dot" onclick="currentSlide(4)"></span>
</div>

modal doesn't show when placed inside a div that has a show/hide function

I have a straightforward multi-image modal set up which works perfectly. However, the page I am trying to integrate it on is set up as follows: I have a header, a set of links to the left, and a main section next to the links. When a link is clicked it changes the content of the main section through a hide/show function. In this manner all of the site is on one page. The problem is that when I place the modal inside the hidden div of choice, the images show up when the main contents is changed, but the modal does not open when the image is clicked. Here is the code for the main div and the hidden div where the modal will be (the user needs to click on where the image would be that says "fall bill" to open the div where the modal is. You will see that I placed some images in as holders. The images fade when hovered as they are supposed to. I cannot figure out any reason why the modal will not show up in such an instance but works if it is not inside a div that can be hidden.
Here is a the code:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('img');
var modalImg = document.getElementById("img01");
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function show(param_div_id) {
document.getElementById('main').innerHTML = document.getElementById(param_div_id).innerHTML;
}
.img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.img:hover {
opacity: 0.8;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 10;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
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.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
#main {
background-image: url('bkgd.jpg');
display: block;
width: 690px;
font-family: "Book Antiqua";
color: #004B97;
font-size: 16pt;
padding: 2%;
margin: 5px;
border-radius: 15px;
border: medium #9999FF solid;
}
.mainContents {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 690px;
flex-wrap: wrap;
justify-content: center;
}
#home,
#bills,
#munTax,
#schoolTax,
#interimTax,
#taxCert,
#dupsReceipts,
#directions,
#FAQ {
display: none;
width: 300px;
font-family: "Book Antiqua";
color: #004B97;
}
.head {
width: 100%;
text-align: center;
font-family: inherit;
font-size: 16pt;
color: #004B97;
padding-bottom: 10px;
}
.head2 {
position: relative;
width: 100%;
text-align: center;
font-family: inherit;
font-size: 14pt;
color: #835BF9;
padding-bottom: 15px;
}
.lower {
width: 100%;
display: flex;
margin: 0 auto auto 10;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
align-items: center;
}
.pay {
text-align: center;
background-image: url('background.jpg');
color: #0D095E;
font-size: 14pt;
border: medium #9999FF solid;
border-radius: 15px;
padding: 5px;
margin: 5px;
}
<div id="main">
<div class="mainContents">
<div class="head">Outside Receiving Hours:<br/> Please use secure drop box outside building
</div>
<div class="head2">
<strong>2022 Millage Rates</strong><br/> County - 3.2273; Township - .62; PVSD (School + Library) = 23.8117
</div>
<div class="lower">
<div class="pay">
Pay Tax Bill Online<br/>
<img alt="Pay Online" height="80" src="payonline.png" width="144">
</div>
<div class="pay">
Understanding Your Tax Bill<br/>
<button onclick="show('bills')" class="link"><img alt="Fall Bill" height="129" src="FallTaxBill-psd.png" width="300"></button>
</div>
</div>
</div>
</div>
<div id="bills">
<div class="mainContents">
<div class="head">Understanding Your Tax Bill</div><br/>
<div class="lower">
<div class="pay">
Spring Tax Bill<br/>
<img class="img" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill<br/>
<img class="img" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill Stubs<br/>
<img class="img" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

the listeners are removed when content is swapped, add image listeners there instead:
var modal = document.getElementById('myModal');
var images = document.getElementsByClassName('img');
var modalImg = document.getElementById("img01");
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
function show(param_div_id) {
document.getElementById('main').innerHTML = document.getElementById(param_div_id).innerHTML;
for (var i = 0; i < images.length; i++) {
var img = images[i];
img.onclick = function(evt) {
console.log(evt);
modal.style.display = "block";
modalImg.src = this.src;
}
}
}
.img {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.img:hover {
opacity: 0.8;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 10;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
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.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content,
#caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
#main {
background-image: url('bkgd.jpg');
display: block;
width: 690px;
font-family: "Book Antiqua";
color: #004B97;
font-size: 16pt;
padding: 2%;
margin: 5px;
border-radius: 15px;
border: medium #9999FF solid;
}
.mainContents {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
position: relative;
width: 690px;
flex-wrap: wrap;
justify-content: center;
}
#home,
#bills,
#munTax,
#schoolTax,
#interimTax,
#taxCert,
#dupsReceipts,
#directions,
#FAQ {
display: none;
width: 300px;
font-family: "Book Antiqua";
color: #004B97;
}
.head {
width: 100%;
text-align: center;
font-family: inherit;
font-size: 16pt;
color: #004B97;
padding-bottom: 10px;
}
.head2 {
position: relative;
width: 100%;
text-align: center;
font-family: inherit;
font-size: 14pt;
color: #835BF9;
padding-bottom: 15px;
}
.lower {
width: 100%;
display: flex;
margin: 0 auto auto 10;
flex-wrap: wrap;
justify-content: space-around;
padding: 10px;
align-items: center;
}
.pay {
text-align: center;
background-image: url('background.jpg');
color: #0D095E;
font-size: 14pt;
border: medium #9999FF solid;
border-radius: 15px;
padding: 5px;
margin: 5px;
}
<div id="main">
<div class="mainContents">
<div class="head">Outside Receiving Hours:<br/> Please use secure drop box outside building
</div>
<div class="head2">
<strong>2022 Millage Rates</strong><br/> County - 3.2273; Township - .62; PVSD (School + Library) = 23.8117
</div>
<div class="lower">
<div class="pay">
Pay Tax Bill Online<br/>
<img alt="Pay Online" height="80" src="payonline.png" width="144">
</div>
<div class="pay">
Understanding Your Tax Bill<br/>
<button onclick="show('bills')" class="link"><img alt="Fall Bill" height="129" src="FallTaxBill-psd.png" width="300"></button>
</div>
</div>
</div>
</div>
<div id="bills">
<div class="mainContents">
<div class="head">Understanding Your Tax Bill</div><br/>
<div class="lower">
<div class="pay">
Spring Tax Bill<br/>
<img class="img" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill<br/>
<img class="img" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
</div>
<div class="pay">
Fall Tax Bill Stubs<br/>
<img class="img" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
</div>
</div>
</div>
</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>

How to change image using arrow keys using javascript

So I have this gallery. I need to change the image when the user will press the arrow keys after the modal popup. left arrow key to change the image in the left and the right arrow key for right. I'm pretty new to javascript so if you can help me it would be great.
Please see the code snippet in full page.
function openModal() {
document.getElementById("myModal").style.display = "block";
}
function closeModal() {
document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
var captionText = document.getElementById("caption");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
captionText.innerHTML = this.alt;
}
.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22, 22, 22, 0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}
<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>

document.addEventListener('keydown', function(e) {
if (e.keyCode === 37) {
document.getElementById("prev1").click()
} else if (e.keyCode === 39) {
document.getElementById("next1").click()
}
});

why i add 1 to the variable but it adds "2" every time?

In the code below I want to add 1 to the page variable but every time I click on next button it adds 2 to the variable.
Code in Codepen
var slides = document.querySelectorAll('.slides');
var dots = document.querySelectorAll('.dot');
var page = 0;
function Swiper(page) {
if (page > slides.length) page = 0;
if (page < 0) page = slides.length;
for (let i = 0; i < slides.length; i++) {
slides[i].classList.remove('active');
}
slides[page].classList.add('active');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
for (let i = 0; i < dots.length; i++) {
dots[i].classList.remove('active-dot');
}
dots[page].classList.add('active-dot');
}
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider)
}
function currentSlide(pagination) {
Swiper(page = pagination);
}
* {
font-family: Raleway;
box-sizing: border-box;
outline: none;
}
body {
min-height: 100vh;
margin: 0;
padding: 16px;
}
/* body>h1,body>h2,body>h3,body>h4,body>h5,body>h6,body>p{
padding-left: 16px;
.btnload:hover{
background-color: #4169E1;
} */
.flexbox {
display: flex;
flex-wrap: wrap;
}
.col-25 {
flex: 25%;
}
.col-50 {
flex: 50%;
}
.col-75 {
flex: 75%;
}
.col-100 {
flex: 100%;
}
button,
input {
outline: none;
}
.container {
max-width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
.slides {
width: 100%;
height: 100%;
position: absolute;
display: none;
animation: slide 0.4s ease;
}
#keyframes slide {
0% {
opacity: 0.2
}
100% {
opacity: 1
}
}
.active {
display: block;
}
.slides .page-number {
position: absolute;
top: 0;
left: 0;
padding: 12px 8px;
color: white;
}
.slides .desc {
color: white;
position: absolute;
top: 310px;
left: 50%;
}
img {
width: 100%;
height: auto;
}
.container a {
padding: 16px;
color: white;
text-decoration: none;
transition: 0.4s;
font-size: 20px;
top: 150px;
position: absolute;
}
img {
width: 100%;
height: auto;
}
.container a:hover {
background-color: rgba(0, 0, 0, 0.616);
}
.container #right-slide {
right: 0px;
}
.container #left-slide {
left: 0px;
}
.pagination {
display: flex;
max-width: 1000px;
height: 100px;
position: relative;
top: 380px;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.pagination .dot {
border-radius: 50%;
height: 15px;
width: 15px;
cursor: pointer;
margin: 2px;
transition: 0.6s;
}
.pagination .dot:hover {
background-color: rgb(138, 138, 138);
}
.dot {
background-color: #ddd;
}
.active-dot {
background-color: rgb(138, 138, 138);
}
.no-active {
background-color: #ddd;
}
<div class="container">
<div class="slides active">
<div class="page-number">1/4</div>
<img src="https://www.w3schools.com/howto/img_nature_wide.jpg" alt="">
<div class="desc">Caption One</div>
</div>
<div class="slides">
<div class="page-number">2/4</div>
<img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="">
<div class="desc">Caption Two</div>
</div>
<div class="slides">
<div class="page-number">3/4</div>
<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Three</div>
</div>
<div class="slides">
<div class="page-number">4/4</div>
<img src="Images/img_mountains_wide.jpg" alt="">
<div class="desc">Caption Four</div>
</div>
<a onclick="Slider(-1)" id="left-slide" href="#">❮</a>
<a onclick="Slider(+1)" id="right-slide" href="#">❯</a>
</div>
<div class="pagination">
<span class="dot dot-color active-dot" onclick="currentSlide(0, event)"></span>
<span class="dot dot-color" onclick="currentSlide(1, event)"></span>
<span class="dot dot-color" onclick="currentSlide(2, event)"></span>
<span class="dot dot-color" onclick="currentSlide(3, event)"></span>
</div>

Swiper(page += slider);
console.log(page += slider)
First you add slider to page (updating the value of page) and pass the result to Swiper.
Then you add slider to (the new value of) page (updating the value of page again) and pass the result to console.log.
As a rule of thumb, combining operations that modify variables with operations that pass them to functions is a good way to confuse yourself.
You might want to split out the actions for clarity.
page += slider;
Swiper(page);
console.log(page);

I think because of this line console.log(page += slider)
It makes the page increase 2 times
function Slider(slider) {
console.log(page)
console.log(slider)
Swiper(page += slider);
console.log(page += slider) // <<<--------------- This line
}