TypeError：无法读取showSlides上未定义的属性“样式”

Question

我正在尝试在此网站https://mokkoamsterdam.com/pages/interiors/上运行以下代码

我不断得到：TypeError：无法读取showSlides上未定义的属性“ style”

我对Java语言还很陌生，因此，您能给我的任何帮助将不胜感激。

由于某些原因，我试图在Shopify自定义页面界面中运行此代码，因此我尝试在以下代码预览器中运行它：https://www.w3schools.com/css/tryit.asp?filename=trycss_default

（删除其中的代码并将其粘贴在其中）

模态应有的作用。

<script>// <![CDATA[
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";
  }
  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";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
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);
}
// ]]></script>

<style><!--
.spacer {
  height:100px;
}
.right-image {
  width:49%;
  padding-right:1%;
  float:right;
}
.left-text {
  width:49%;
  float:left;
  padding-right:1%;
}
.left-image {
  width:49%;
  padding-right:1%;
  float:left;
}
.right-text {
  float:right;
  width:49%;
  padding-left:1%;
}
.title {
  width:100%;
  text-align:center;
  height:50px;
  font-weight:bold;
}
#container {
  position:relative;
  padding:10px;
  width:100%;
  overflow:hidden;
}
@media screen and (max-width: 630px) {
  div.right-image {
    width:100%;
    padding:none;
  }
  div.left-image {
    width:100%;
    padding:none;
  }
   div.right-text {
    width:100%;
    padding-left:none;
    padding-top:2%;
  }
  div.left-text {
    width:100%;
    padding-right:none;
    padding-top:2%;
  }
}
* {
  box-sizing: border-box;
}

.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-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);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
--></style>

    <meta name="viewport" content="width=device-width, initial-scale=1">

<div id="container">
<div class="title">Our Way</div>
<div class="left-image"><img src="https://cdn.shopify.com/s/files/1/2249/6713/files/mokko_herengracht0301_ba4c1a2e-93be-4e11-9b80-5a1b07483e54_2450x.jpg" style="width: 100%;" onclick="openModal();currentSlide(1)" class="hover-shadow cursor left-image"></div>
<div class="right-text">While we don't have a single fixed style, we do have a strong interest in Japanese aesthetics and love taking a contemporary approach to traditional Japanese design. We like combining big, bold statements with minimalist, clean lines and where appropriate, match contemporary art and design with rare vintage finds. We believe a great interior leaves room for the mind to be involved and question things. It should strike the right balance between materials and in composition of objects. A space should inspire rather than impress.</div>
</div>
<div class="">
<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="modal-content">
<div class="mySlides">
<div class="numbertext"></div>
<img src="https://cdn.shopify.com/s/files/1/2249/6713/files/mokko_herengracht0301_ba4c1a2e-93be-4e11-9b80-5a1b07483e54_2450x.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext"></div>
<img src="https://cdn.shopify.com/s/files/1/2249/6713/files/mokko_herengracht0182_2450x.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext"></div>
<img src="https://cdn.shopify.com/s/files/1/2249/6713/files/mokko_herengracht0091_2450x.jpg" style="width: 100%;">
</div>
<div class="mySlides">
<div class="numbertext"></div>
<img src="https://cdn.shopify.com/s/files/1/2249/6713/files/mokko_herengracht0202_2450x.jpg?" style="width: 100%;">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a>
</div>
</div>
<br><br><br>
</div>
<a style="display: block;" href="https://mokkoamsterdam.com/pages/herengracht/">
<div id="container">
<div class="title">A Canal House, Herengracht, Amsterdam</div>
<div class="right-image"><img src="https://cdn.shopify.com/s/files/1/2249/6713/files/mokko_herengracht0182_900x.jpg" alt="" width="100%" height=""></div>
<div class="left-text">Taking a holistic approach, we transformed the main living room of an eclectic style canal house into a space for reflection and retreat inspired by Japanese aesthetics and culture. This was pursued by creating space, breaking with conventions and by celebrating the imperfections of natural materials, in Japan known as the concept of "wabi sabi". Most furniture and lighting objects are custom designed for the interior. The custom pieces were complemented with furniture crafted in Japan.We guided and supervised the construction, furniture making and the execution of the project, working closely together with our network of local craftsmen and (Japanese) suppliers. <br>Photography by Ralph Reniers.</div>
</div>
<div class="">
<br><br><br>
</div>
<div id="container">
<div class="title">Wildthings - Flagship retail store, Bali, Indonesia (2019)</div>
<div class="left-image"><img src="https://cdn.shopify.com/s/files/1/2249/6713/files/image00028_1296x.jpg" alt="" width="100%" max-height="300px"></div>
<div class="right-text">For jewelry brand Wildthings, we helped designing their new flagship store on Bali, Indonesia. Under the creative direction of the founder we made renderings for visualization and technical drawings for construction of the interior of the store.</div>
</div>
</a>