javascript代码无法在文件中工作，但在控制台日志中几乎每个代码都运行良好

Question

当我从一个文件运行它时，我的JavaScript代码无效，但它在控制台日志中工作，几乎每次我测试JavaScript代码时都会发生这种情况。我是JavaScript的新手，所以我很难理解发生了什么。如果我知道问题是什么会很棒。

var slideIndex=0;
var slide;
function showSlides(n){
	 var i;
    slides = document.getElementsByClassName("mySlides");
	for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
	if (slideIndex> slides.length) {slideIndex = 1}
	slides[slideIndex-1].style.display = "block";
	 setTimeout(showSlides, 1000);    
}
function nextslide(position){
	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";  
    }
	        slides[slideIndex-1].style.display = "block";  

}
showSlides();

.slideshow-container{
  width:100%;
  margin:auto;
  height:auto;
  position:relative;
}
.mySlides{
	width:100%;
	height:500px;
	display:none;
   transition: all 0.6s ease;	
}
.myslides img{
	height:100%;
}
.myslides h2{
    color: whitesmoke;
    position: absolute;
    top: 25%;
    left:15%;
	font-size:40px;
}

.myslides p{
    color: whitesmoke;
    position: absolute;
    top:38%;
    left: 15%;
    font-size:25px;
    line-height: 15px;
}
.prev{
	cursor: pointer;
    width: auto;
    font-weight: bold;
    font-size: 50px;
    color: white;
    top:35%;
    position: absolute;
    left: 35px;
    float: left;
}
.next{
	cursor: pointer;
    width: auto;
    font-weight: bold;
    font-size: 50px;
    color: white;
    top:35%;
    position: absolute;
    right: 35px;
    float:right;
}
.next:hover {
    color: #1ABC9C;
    border: 1px solid;
    padding: 0px;
    border-radius:16px 43px 39px 21px;
    width: 35px;
    padding-left: 8px;
    box-shadow: 1px 1px 10px 2px;
}

.prev:hover{
   color: #1ABC9C;
    border: 1px solid;
    padding: 0px;
    border-radius: 40px 16px 16px 38px;
    width: 35px;
    padding-left: 12px;
    box-shadow: 0px 1px 12px 1px;
}
.slider_btn{
	font-size:20px;
    padding:10px 20px;
    background: whitesmoke;
    border: none;
    border-radius: 5px;
    font-family:"MS Serif", "New York", serif;
	cursor:pointer;
	outline:none;
	position:absolute;
	top:50%;
    left: 15%;
}
.slider_find{
	margin-left:11%;
}
.slider_btn:hover{
	background:#1ABC9C;
	color:whitesmoke;
}

<div class="slideshow-container"><!--slider starts-->

      <div class="mySlides mySlides-2 fade showing" style="display:block;">
        <img src="assets/pexels-photo-355988.jpeg" style="width:100%">
        <h2>Elegant Design</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem </p>
      </div>
      
      <div class="mySlides fade showing">
        <img src="assets/iPhone-Text-Monitoring-on-Apple-Devices-Yes-And-So-Much-More.jpg" style="width:100%">
        <h2>Standard Coding</h2><p>Sed ut perspiciatis unde omnis iste natus error sitvoluptatem </p>
      </div>
      
      <div class="mySlides fade showing">
        <img src="assets/pexels-photo-168765.jpeg" style="width:100%">
        <h2>Responsive Layout</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem </p>
      </div>
      <a class="prev" onclick="nextslide(-1)">&#10094;</a>
      <a class="next" onclick="nextslide(1)">&#10095;</a>
       <a href="#"><button class="slider_btn contact  active ">Contact Us</button></a>
       <a href="#"><button class="slider_btn slider_find ">Find More</button></a>
      
      </div><!--slider ends-->