So, basically, I am creating a slide show, and want to hide my div's until the fluted button in the top left gets clicked it shows. When I try to change the transform: scale() of my DIV (dots) it just doesn't change even after I try to run the function. I tried to just use a normal regex to convert its scale but for some reason, it still doesn't change even after I put the function in the onClick attribute. Could somebody help with why it isn't working even after I did step-by-step trials? Thank you!!
let slideIndex = 1;
//showSlides(slideIndex);
// Next/previous controls n = number selected in arrows
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(nu) {
showSlides(slideIndex = nu);
}
function changeScale(newScale) {
var div1 = document.getElementById("dot1");
var div2 = document.getElementById("dot2");
var div3 = document.getElementById("dot3");
div1.style.transform = div1.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
div2.style.transform = div2.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
div3.style.transform = div3.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
}
function showSlides(n) {
//makes i variable, gets slides and dots on slideshow
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
//n = number inputted/selected
//dots.style.transform = dots.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + 1 + ')');
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";
}.h2 {
font-family: 'Roboto', serif;
}
body {
background-color: #000;
}
.wrapper {
display: flex;
flex-direction: column;
width: 400px;
justify-content: center;
align-items: center;
border-radius: 3rem;
/*box-shadow: 0.6rem 0.6rem 1.9rem #525c5c, -0.5em -0.5em 1em #ffffff;
*/
z-index: 100;
transition-duration: 0.1s;
/* ADD */
}
.wrapper:hover {
text-shadow: 5px 5px 4px lightgray;
cursor: pointer;
transition-duration: 0.2s;
}
.wrapper .image {
overflow: hidden;
/* ADD */
border-radius: 1rem;
/* ADD */
}
.wrapper .image img {
width: 100%;
object-fit: cover;
border-radius: 1rem;
/*REMOVE */
cursor: pointer;
transition: transform 0.5s;
/* ADD */
}
.wrapper:hover img {
/* change scale? */
transform: scale(1.5);
}
.wrapper .infocontent {
display: flex;
justify-content: center;
align-items: center;
text-shadow: 0.5px 2px 10px rgba(214, 205, 205, 0.616);
font-weight: bold;
font-family: Consolas;
letter-spacing: 2px;
color: #441d9e;
cursor: pointer;
}
* {
box-sizing: border-box;
}
/* Slideshow container */
.slideshow-container {
max-width: 1000px;
position: relative;
margin: auto;
}
/* Hide the images by default */
.mySlides {
display: none;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
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 {
background-color: rgba(53, 49, 49, 0.37);
}
.next:hover {
background-color: rgba(53, 49, 49, 0.37);
}
/* 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;
}
#dot1 {
transform: scale(0);
}
#dot2 {
transform: scale(0);
}
#dot3 {
transform: scale(0);
}
.active,
.dot:hover {
background-color: #717171;
}
/* .hide{
}
*/
/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: 0.4;
}
to {
opacity: 1;
}
}<h1 class="h2">Flute</h1>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
<div class="wrapper">
<div class="image">
<img src="image1.webp" title="Golden Flute Background (possibly article?)" onclick="currentSlide(1); changeScale(4); ">
</div>
<div class="infocontent">
<h3><strong>Golden Flute</strong></h3>
</div>
</div>
<!-- Slideshow container -->
<div class="slideshow-container">
<!-- Full-width images with number and caption text -->
<div class="mySlides fade">
<div class="numbertext">1 / 3</div>
<img id="image" src="image1.webp" style="width:100%">
<div class="text">Caption Text</div>
</div>
<div class="mySlides fade">
<div class="numbertext">2 / 3</div>
<!-- <img src="img2.jpg" style="width:100%">-->
<div class="text">Caption Two</div>
</div>
<div class="mySlides fade">
<div class="numbertext">3 / 3</div>
<!--<img src="img3.jpg" style="width:100%"> -->
<div class="text">Caption Three</div>
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
<br>
<!-- The dots/circles -->
<div style="text-align:center">
<span class="dot" onclick="currentSlide(1)" id="dot1"></span>
<span class="dot" onclick="currentSlide(2)" id="dot2"></span>
<span class="dot" onclick="currentSlide(3)" id="dot3"></span>
</div>
