堆栈内存溢出
  繁体   English   中英

Javascript 函数在第一次调用时无法正常工作

[英]Javascript function not working well when called for the first time

 原文  2018-09-01 19:21:31  0   2    javascript/ html/ css

问题描述

我基本上是想在我的页面上使用此代码： https : //www.w3schools.com/w3css/tryit.asp?filename=tryw3css_slideshow_dots2

问题是我想创建那个幻灯片，但是当我第一次加载页面时，没有图像显示。 当我单击圆圈时，会出现一个图像并且一切正常。 我收到以下错误：

Uncaught TypeError: Cannot read property 'style' of undefined
   at showDivs (details.js:26)
   at details.js:2

这是幻灯片的代码片段：

        <div class="w3-content w3-display-container" style="max-width:800px">
          <img class="mySlides" src="<c:url value="/resources/pics/casa1.jpg" />" style="width:100%">
          <img class="mySlides" src="<c:url value="/resources/pics/casa2.jpg" />" style="width:100%">
          <img class="mySlides" src="<c:url value="/resources/pics/casa3.jpg" />" style="width:100%">
          <img class="mySlides" src="<c:url value="/resources/pics/casa4.jpg" />" style="width:100%">
          <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%">
            <div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</div>
            <div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</div>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span>
            <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span>
          </div>
        </div>

还有我的 details.js

    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";
    }

2 个解决方案

解决方案1
 3  2018-09-01 19:25:22

当您像在此处那样直接调用脚本代码时，您的文档可能尚未完全加载，因此找不到元素。 在页面加载完成后，尝试运行代码，如下所示： 

  window.addEventListener('load', function() {
     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";
    }

解决方案2
 1 已采纳  2018-09-01 19:36:43

确保将整个<script>元素放在HTML的底部，紧接在结束body标签（ </body> ）之前。 我敢打赌，现在，您的代码已经在.mySlides HTML之前，因此，当代码首次运行时，这些元素都还没有解析到内存中。

另外，您的src图像属性的HTML无效有两个原因。

  1. 您有双引号嵌套在双引号内。
  2. 您在属性值中嵌入了<和>字符，这是不允许的。

如果您确实希望属性中包含该代码，则代码应如下所示： 

<img class="mySlides" src="&lt;c:url value='/resources/pics/casa4.jpg&gt;'">

但是，为什么要使src等于另一个标签？

另外，请远离W3学校，因为众所周知那里的代码不完整，不正确或已过时。 您的示例包含了您真正应该避免使用的过时技术，例如内联HTML事件属性，例如onclick和内联样式。

这是一个工作版本： 

 .mySlides {height:100px; } 
 <!doctype html> <html> <head> </head> <body> <div class="w3-content w3-display-container" style="max-width:800px"> <img class="mySlides" src="http://cdn.shopify.com/s/files/1/0885/7466/products/smiley-decal_1024x1024.png?v=1434998018"> <img class="mySlides" src="https://imgc.allpostersimages.com/img/posters/have-a-nice-day-smiley-face_u-L-F59IP80.jpg?src=gp&w=300&h=375"> <img class="mySlides" src="https://images-na.ssl-images-amazon.com/images/I/41q0g8iq5iL.jpg"> <img class="mySlides" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjg89JZEZ2SAr1Qd6b__1RO3XoyaiVJStnzJZ5lqwoD45yKRLp"> <div class="w3-center w3-container w3-section w3-large w3-text-white w3-display-bottommiddle" style="width:100%"> <span class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">&#10094;</span> <span class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">&#10095;</span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(1)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(2)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(3)"></span> <span class="w3-badge demo w3-border w3-transparent w3-hover-white" onclick="currentDiv(4)"></span> </div> </div> <script> 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> </body> </html>

解决方案3
 0  2021-12-09 15:35:57

太好了，它对我有用！

只是 ')' 最后不见了

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 javascript中的函数在调用时不起作用 每次调用时都不执行Javascript函数 首次调用返回类型函数时未调用两个javascript函数 在表单标签中调用时，JavaScript函数不起作用 Javascript：首次调用该函数时获取输入值出错 Canvas的.fillText函数在第一次调用后似乎停止工作 SetInterval在某个时间间隔内调用函数后，无法在javascript中工作 使Javascript文件在函数中本地可用时，第一次无法使用 Javascript函数在第一次调用时起作用，但在第二次或之后的任何其他时间都不会起作用 当事件被另一个函数的元素调用时，JavaScript函数不起作用
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM