I try to fix this code soo the click funktion for toggle works but I get the error
Uncaught ReferenceError: toggleFunction is not defined
at HTMLButtonElement.onclick
Its sure very easy to fix but I cant find the problem.
I have tried to change the document.getElementsByClassName to
document.getElementsById but it didnt work.
<!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" type="text/css" href="style.css">
<script src="https://unpkg.com/react#16.4.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16.4.1/umd/react-dom.production.min.js"></script>
</head>
<body>
<div class="c-section">
<div class="c-header">
<div class="c-header__menu">
<ul class="c-navigation">
<li>Stories</li>
<li>Events</li>
<li>Places</li>
<li>Boards</li>
</ul>
</div>
<div class="c-rotate">
<div class="c-rotate__text">
<h1 class="c-rotate__title">Beautiful Escape</h1>
<p class="c-rotate__text-inspiring">One of the greatest things about the sport of surfing is that you
need only three things: your body a surfboard, and a wave.
</p>
</div>
<div class="c-rotate__image">
<img src="img/vawe.jpg" alt="">
</div>
</div>
</div>
<div class="c-citate">
<p class="c-citate__text">Surfing is the most blissful experience you can have on this planet,<br>
a taste of heaven.<br>
John McCarthy</p>
</div>
<div class="c-image__video">
<div class="c-image__video-section">
<img src="img/surfer.jpg" alt="" class="surferonBeach">
<p class="c-text-inspiring__surfer">By better understanding the various aspects<br>
of surfing, you will improve faster and have more<br>
fun in the water.</p>
<p class="c-text__read-more" id="expandable-section-1" tabindex="-1">Read More</p>
</div>
<img src="img/surferonwave.jpg" alt="" class="surferonWave">
</div>
<div class="c-shop">
<div class="c-shop__text">
<p>Shop</p>
<h2 class="c-title__shop">Surfboards</h2>
</div>
<div class="c-product">
<div class="c-product__slide">
<ul class="c-product__list fade">
<li class="c-product__background"><img src="img/surfboard2.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard3.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard1.png" alt=""></li>
</ul>
</div>
<div class="c-product__slide">
<ul class="c-product__list fade">
<li class="c-product__background"><img src="img/surfboard4.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard5.png" alt=""></li>
<li class="c-product__background"><img src="img/surfboard6.png" alt=""></li>
</ul>
<div id="c-product__toggle">
test
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Toggle funktion -->
<button class="content-button__toggle" onclick="toggleFunction()">Show</button>
</div>
</div>
<div class="c-surf-training">
<div class="c-text__surf-training">
<h2 class="c-title__surf-training">Surf Training</h2>
<p class="c-text-inspiring__surf-training">By better understanding the varius aspects of surfing,<br>
you will improve faster and have more fun in the water.</p>
<p class="c-read-more" id="expandable-section-1" tabindex="-1">Read More</p>
</div>
<div class="c-surf-training--image">
<img src="img/surferonwave2.jpg" alt="">
</div>
</div>
<div class="c-point-break">
<div class="c-point-break--image">
<img src="img/sunset.jpg" alt="">
</div>
<div class="c-point-break__flex">
<h2 class="c-point-break__title-">Point Break</h2>
<div class="c-point-break__expand">
<p class="c-text-inspiring__point-break">By better understanding the varius aspects of surfing,<br>
you will improve faster and have more fun in the water</p>
<p class="c-read-more" id="expandable-section-1" tabindex="-1">Read More</p>
</div>
</div>
</div>
<div class="c-form">
<h2 class="c-join__title">Join the club</h2>
<p class="c-text-inspiring">Text</p>
<form action="index.html" method="GET" class="c-form__input">
<input id="join-input" class="join-block__input" name="e-mail" type="text" placeholder="Your E-mail">
<button class="o-join__button">
<span class="visually-hidden">Join our newsletter</span>
</button>
</form>
</div>
<div class="c-camp">
<img src="img/campfire.jpg" alt="">
<div class="c-camp-flex">
<p>Our camp</p>
<h2 class="c__">CA 91932, USA Imperial Beach 560 Silver Strand Blvd</h2>
Get in touch
</div>
</div>
<div class="c-footer__menu">
<ul class="c-navigation">
<li>Stories</li>
<li>Events</li>
<li>Places</li>
<li>Boards</li>
</ul>
</div>
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
</div>
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("c-product__slide");
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";
// toggle funktion för hide show surfbrädor
function toggleFunction(){
var x = document.getElementsByClassName("c-product__toggle");
if (x.style.display === "block") {
x.style.display = "none";
}else{
x.style.display = "block";
}
}
}</script>
</body>
</html>
``````````````````````
I want to be able to show the text test and toggle hide show that.
But I get error:
Uncaught ReferenceError: toggleFunction is not defined
at HTMLButtonElement.onclick
You messed up the curly braces when you wrote the toggleFunction function, you placed it inside the showSlides function.
change
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("c-product__slide");
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";
// toggle funktion för hide show surfbrädor
function toggleFunction(){
var x = document.getElementsByClassName("c-product__toggle");
if (x.style.display === "block") {
x.style.display = "none";
}else{
x.style.display = "block";
}
} // There's an extra curly brace here
}</script>
to
<script type="text/javascript">
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n){
var i;
var slides = document.getElementsByClassName("c-product__slide");
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";
} // This curly was missing
// toggle funktion för hide show surfbrädor
function toggleFunction(){
var x = document.getElementsByClassName("c-product__toggle");
if (x.style.display === "block") {
x.style.display = "none";
}else{
x.style.display = "block";
}
}
</script>
Related
How can I make this slider run automatically with previous/next controls?
It's working fine when I click on the previous and next buttons, but the sliders are not running automatically. Also, when I move the cursor to any of the slides it won't pause on mouse up.
var slideIndex = 0;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var 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";
setTimeout(showSlides, 1000);
}
<div class="slideshow-container">
<div class="mySlides fade">
<img src="/imgs/hol_str_08mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/amz_dls_05mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/smr_apl_08feb.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/meg_fas_08mar.jpg" style="width:100%">
</div>
<div class="mySlides fade">
<img src="/imgs/spk_str_08mar.jpg" style="width:100%">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<div style="text-align:center;display:none">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
Maybe to solve your problem, you should try to pass the "SlideIndex" Variable as parameter of the showslides function in your setTimeout.
So your setTimeout code should be
setTimeout(function(){showSlides(SlideIndex+1)},1000)
Or you could even use your plus function
setTimeout(function(){plusSlides(1)},1000)
I am working on a website that should have image sliders with clickable buttons that flip to the next image.
I was able to make a single slider / page, but as I have no experience in coding yet, I ran into difficulties when I was trying make multiple sliders following each other directly. The buttons of a certain slider started to mix up, and target other sliders too, or only the first one, but not the way I wanted..
So I started copying and repeating the same lines of code and applying them to groups of images separately.
I also want some text to flip together with the images, so I grouped the text and images together with the buttons, and finally I ended up having a lot of repetition, and way too long codes. :-)
Right now it works, but I assume that there is a much easier, solution, that would make my code a lot shorter.
Can someone help me with:
Having one good java script, that doesn't mix up the targets, when having multiple sliders?
Having only one "buttons"/slider instead of copying them to all the "containergrid"s groups, but still flipping the text together with the image?
Thanks, and sorry for the long code. :)
<div class="content">
<!---THE FIRST SLIDER--->
<div class="slider_1">
<div class="slides_1">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_1_1">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
<div class="slides_1">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_1_2">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
</div>
<!---THE SECOND SLIDER--->
<div class="slider_2">
<div class="slides_2">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_2_1">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
<div class="slides_2">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_2_2">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs1(slideIndex);
function plusDivs1(n) {
showDivs1(slideIndex += n);
}
function showDivs1(n) {
var i;
var x = document.getElementsByClassName("slides_1");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
</script>
<script>
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("slides_2");
if (n > x.length) { slideIndex = 1 }
if (n < 1) { slideIndex = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
</script>
So you would just have to pass a reference to your slides into the showDivs function, so you can keep the clicks independent of one another. You'd still have to initialize each slider separately.
function plusDivs(slider, n) {
showDivs(slider, slideIndex += n);
}
function showDivs(slider, index) {
var i;
var x = document.getElementsByClassName(slider);
if (index > x.length) {
slideIndex = 1
}
if (index < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
// Initialize the sliders
var slideIndex = 1;
showDivs('slides_1', slideIndex);
showDivs('slides_2', slideIndex);
In your HTML you just need to pass the reference to the plusDivs function:
onclick="plusDivs('slides_1', 1)"
Here is a fiddle showing a working example
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 4 years ago.
When I put my JavaScipts code in the tags in my html file everything works, but when I put it in an external .js file, everything but 1 thing works. When loading the page it doesn't load a picture in my slideshow automatically, but when in my HTML file it does do that.
My HTML header:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/EindopdrachtTest.css">
<script type="text/javascript" src="myTest1.js"></script>
</head>
My HTML code:
<div id="slide">
<div class="mySlide">
<div class="tipNumber">1 / 3
</div>
<img src="images/Tip1.jpg" class="slideImg">
<div class="caption"> Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">2 / 3
</div>
<img src="images/tip2.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">3 / 3
</div>
<img src="images/tip3.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<!-- next and previous buttons-->
<button class="previous" onclick="slidePlus(-1)">❮ Prev</button>
<button class="next" onclick="slidePlus(+1)">Next ❯</button>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
My JavaScript:
var slideIndex = 1;
showSlides(slideIndex);
var slides,dots;
function showSlides() {
var i;
slides = document.getElementsByClassName("mySlide");
dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex> slides.length) {slideIndex = 1}
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";
setTimeout(showSlides, 8000); // Change image every 8 seconds
}
function slidePlus(position) {
var i;
slideIndex +=position;
if (slideIndex> slides.length) {slideIndex = 1}
else if(slideIndex<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";
}
function currentSlide(index) {
var i;
if (index > slides.length) {
index = 1
}
else if(index < 1){
index = 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[index-1].style.display = "block";
dots[index-1].className += " active";
}
The problem is that the script is loading before the DOM is ready. Call the script at the end of the body element instead of calling it in the head element, like this:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="css/EindopdrachtTest.css">
</head>
<body>
<div id="slide">
<div class="mySlide">
<div class="tipNumber">1 / 3
</div>
<img src="images/Tip1.jpg" class="slideImg">
<div class="caption"> Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">2 / 3
</div>
<img src="images/tip2.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<div class="mySlide">
<div class="tipNumber">3 / 3
</div>
<img src="images/tip3.jpg" class="slideImg">
<div class="caption">
Studietips
</div>
</div>
<!-- next and previous buttons-->
<button class="previous" onclick="slidePlus(-1)">❮ Prev</button>
<button class="next" onclick="slidePlus(+1)">Next ❯</button>
<div class="dots">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<script type="text/javascript" src="myTest1.js"></script>
</body>
Here is the html code and JavaScript code, on page refresh slider images does not get loaded but after clicking the next button of slider it works well but after page refresh images disappear.
<div class="slide-banner">
<div class="slide">
<img src="assets/3387c282bae062cc6efada9402ef42ad.jpg" />
</div>
<div class="slide">
<img src="assets/iPhone-Text-Monitoring-on-Apple-Devices-Yes-And-So-Much-More.jpg" />
</div>
<div class="slide">
<img src="assets/pexels-photo-168765.jpeg" />
</div>
<div class="slide">
<img src="assets/pexels-photo-355988.jpeg" />
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
Please review my snippet it may help to resolve your issue.
You should use absolute path rather than the relative path in image src. And called plusSlides(1) method rather than showSlides().
var slideIndex = 1;
plusSlides(1);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
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";
}
document.addEventListener("DOMContentLoaded", function(event) {
plusSlides(1);
});
<div class="slide-banner">
<div class="slide">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="slide">
<img src="https://dummyimage.com/600x400/000/fff" />
</div>
<div class="slide">
<img src="https://dummyimage.com/500x700/000/fff" />
</div>
<div class="slide">
<img src="https://dummyimage.com/100x200/000/fff" />
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
I have a page with several buttons, when each button is clicked a different modal pops up. Some of the modals are carousels, the code I have works but for only one of the carousels, when I have more than one I get extra empty slides on all the carousels. So I'm guessing my code is counting all the slides from all the carousels together. Im trying to have write something where it says if this modal is clicked then get the slides from the clicked modal only but Im struggling with that.
These are the bits of relevant code:
<script>
//Carousel
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
</script>
<script>
//Display corresponding modal of letter that is clicked
$(".button").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
document.body.classList.add("modal-open");
});
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "close"){
$(this).closest(".modal").hide();
document.body.classList.remove("modal-open");
}
});
</script>
<button class="button" data-modal="#modalOne"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalB"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalC"><img id="myImg" src=""></button>
<!-- The Modal -->
<div id="modalA" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class= "mySlides">
<img class="gif" src="" width="100" height="100" >
<h4>Title</h4>
<p> content </p>
</div>
<div class="mySlides">
<h4 Title</h4>
<p> content </p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
<!-- The Modal B -->
<div id="modalB" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
</div>
</div>
</div>
<!-- The Modal C -->
<div id="modalC" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
<div class="mySlides">
<h4></h4>
<p></p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
When you do this line
var x = document.getElementsByClassName("mySlides");
You count all the elements with class name of "mySlides", which is ALL of the slides in the HTML document.
Add code in your button click routine to count the number of slides in the corresponding modal:
Add this at the top of the javascript:
var modal = "modalA";
showDivs(slideIndex, modal);
Change the button click to:
$(".button").on("click", function() {
modal = $(this).data("modal").text();
$("#" + modal).show();
document.body.classList.add("modal-open");
});
Modify your showDivs function to include the new variable:
function showDivs(n, modal) {
var i;
var x = document.getElementById(modal).getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
Finally, change the data-modal attributes of your buttons to read:
<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">
You will also need to update the lines:
function plusDivs(n) {
showDivs(slideIndex += n, modal);
}
function currentDiv(n) {
showDivs(slideIndex = n, modal);
}