I get this JS error below when I open my onderhoud page in inspect element?

I changed the code to this 

<script> 
  let slideIndex = 0; 
 
  function showSlides() { 
    let i; 
    let slides = document.getElementsByClassName("mySlides"); 
    let dots = document.getElementsByClassName("dot"); 
 
    for (i = 0; i < slides.length; i++) { 
      slides[i].style.display = "none"; 
    } 
    slideIndex++; 
    if (slideIndex >= slides.length) { 
      slideIndex = 0; 
    } 
    for (i = 0; i < dots.length; i++) { 
      dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex].style.display = "block"; 
    dots[slideIndex].className += " active"; 
    setTimeout(showSlides, 4000); // 4000 = Change image every 4 seconds 
  } 
  showSlides(); 
</script> 

but the problem is the same .

which code is the best of this 2 and where is the fault?

I have fixed those errors with this code :

<script>https://webdesignleren.com/
let slideIndex = 0;

function showSlides() {
  let i;
   const slides = document.getElementsByClassName("mySlides");
  const dots = document.getElementsByClassName("dot");

  if (!slides) {
    return;
  }

  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
    slides[slideIndex].style.display = "block"; 
	  
  }
  slideIndex = (slideIndex + 1) % slides.length;
  slideIndex = (slideIndex + 1) % dots.length;
	
  
	

  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");	  
	dots[slideIndex].className += " active"; 
	   
	 
  }
	
	
	  
  setTimeout(showSlides, 2000);
}

showSlides();  
		
		
	



		


</script>

this is css :

	.mySlides 	{
		display: none;
	
	}	
	
img {vertical-align: middle;
	
	}	
	
	/* Slideshow container */
.slideshow {
  max-width: 100%;
  position: relative;
  margin: auto;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

this is HTML:

<div class="slideshow">
      <div class="mySlides">
       
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1920-1080.jpg" alt="Slide 1"  style="width: 100%"    height="auto"    />
        	
      
		  
      </div>

      <div class="mySlides">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/1924-1080.jpg" alt="Slide 2"  style="width: 100%"   height="auto"    />

      
      </div>

      <div class="mySlides">
        
        <img
          src="https://webdesignleren.com/wp-content/uploads/2023/01/mini-cooper-image-for-Home-page-1920-1080.jpg" alt="Slide 3"  style="width: 100%"  height="auto"  />
		   /div>
		
		 
    </div>  
		
<div style="text-align: center">
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot"></span>
    </div>  

all the error syntax are solved.

but now I get the order of dots playing not correctly you can see if you go to my homepage .

I tried every possible solution and searched in google without solution.

can someone tell me how I can fix this dots ordinary problem?

what I have to do to solve this problem . I tried chat GPT with many other codes but the problem with error syntax coul not be solved . so I did this way and now I got problem with dots.

my url is : https://webdesignleren.com/

thanks

I have solved the problem.

the syntaxerror was not from the code in javascript it was from that I had to create specific footer for home page because I have specific header for each page.

this is my specific code for every page for the header. this code has to be in page.php

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://developer.www.ads-software.com/themes/basics/template-hierarchy/
 *
 * @package auto-raparatie-service
 */
if ( is_page('onderhoud') ) :
    get_header('new1');
elseif ( is_page('banden') ) :
    get_header('new2'); 

elseif ( is_page('apk') ) :
    get_header('new3'); 
elseif ( is_page('contact') ) :
    get_header('new4'); 
elseif ( is_page('bedankt') ) :
    get_header('new5'); 
else :
    get_header();
endif;
?>

and this my specific footer code in page.php:

<?php
get_sidebar();

if(is_page('home')) {	
   get_footer('new');
} else {
   get_footer();
}

after 2 days searching I found the solution which I would never think as beginner that I had to make specific footer for home page to let the slidershow run perfectly. because I have for everypage specific header!

thanks everyone