页面加载上的活动类未触发

Question

So I have an image slider on a website with navigational dots that have an active animation if the background image is on the current dot.因此，如果背景图像位于当前点上，我在网站上有一个带有导航点的图像滑块，这些导航点具有活动动画。 I have set it up so that when the page loads the first dot will have the active class from the start.我已将其设置为当页面加载时，第一个点将从一开始就具有活动类。 Everything is working well but I just do not understand why the active dot on page load won't trigger unless I include the onload = buttonClick() on the body element, I have tried using an event listener in JS but it does not work.一切正常，但我只是不明白为什么页面加载上的活动点不会触发，除非我在 body 元素上包含onload = buttonClick() ，我尝试在 JS 中使用事件侦听器，但它不起作用。 This does not make sense to me as my head class has an active listener that calls my onStart function, which in turn, should call my buttonClick function and activate the active class.这对我来说没有意义，因为我的头类有一个主动侦听器，它调用我的 onStart 函数，反过来，它应该调用我的buttonClick函数并激活活动类。 Can someone help shed some light on this problem?有人可以帮助阐明这个问题吗？ It just does not make sense to me.这对我来说没有意义。 thnx ^_^谢谢^_^

HTML : HTML :

    <!DOCTYPE html>
    <html lang="en">
    <head id = "start">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Ukiyo Sushi ツ</title>
        <link href = "style.css" type = "text/css" rel = "stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
        <script src = "/script.js"></script>
    </head>
    <body> <!--<body onload = "buttonClick()">--> 
        <header id = "bg">
            <nav class = "navbar">
                <a href = "#" class = "logo">Ukiyo Sushi ツ</a>
                <ul>
                    <li><a href ="#" class = "about">About us</a></li>
                    <li><a href = "#" class = "menu">Menu</a></li>
                    <li><a href = "#" class = "services">Services</a></li>
                    <li><a href = "#" class = "contact">Contact</a></li>
                </ul>
            </nav> 
            <div class = "sushiPlatter">
                <h2 id = "caption">Chef's Special Sushi Platter</h2>
                <div class = "dots">
                    <span class = "dot" onclick = "imgslider(1); currentSlide(1);"></span>
                    <span class = "dot" onclick = "imgslider(2); currentSlide(2);"></span>                    <span class = "dot" onclick = "imgslider(3); currentSlide(3);"></span>
                </div>
                <a href = "#">View Menu</a>
            </div>
            </header>
        <section class = "description">
            <div class = "topRow">
                <dl class = "adress">420 High Street, Houston, Texas 77075</dl>
                <dl class = "phoneNumber">(832)-123-4567</dl>
                <dt>Lunch: </dt>
                <dl class = "hours">12:00pm - 4:00pm</dl>
                <dt>Dinner: </dt>
                <dl class = "hours">6:00pm - 10:30pm</dl>
            </div>   
            <div class = "imageDiv">
                <span>Welcome to Ukiyo Sushi ^_^</span>
                <figure>
                    <img src = "img/lantern.jpg" class = "descImg">
                    <figcaption  class = "imgCap">Ukiyo Sushi is a japanese sushi restaurant that was established in Houston, Texas in 2010. Due to our excellent customer service and quality of food, we have built a reputation as one of the best sushi restauraunts in the greater Houston area. </figcaption  class = "imgCap">
                </figure>
            </div> 
        </section>
    </body>
    </html>

JavaScript : JavaScript :

    var imageIndex = 1;
    document.getElementById("start").addEventListener("load", onStart);

    function onStart(){
       buttonClick(imageIndex);
    }

    function currentSlide(n)
    {
       buttonClick(imageIndex = n);
    }

    function buttonClick(n){
       var i;
       var dot = document.getElementsByClassName("dot");
       if(n > dot.length){ imageIndex = 1}
       if(n < 1){imageIndex = dot.length}
       for(i = 0; i < dot.length; i++){       
          dot[i].classList.remove("active");
       }
       dot[imageIndex -1].className += " active";
    }

EDIT: alright so I figured out you cannot use the head element for events, and that solved my first problem but now I cannot trigger the onload event with an event listener I have to use the onload event in my HTML does anybody know why?编辑：好吧，所以我发现你不能将 head 元素用于事件，这解决了我的第一个问题，但现在我无法使用事件侦听器触发 onload 事件我必须在我的HTML中使用 onload 事件有人知道为什么吗？

HTML : HTML :

    <body> <!--<body onload = "onStart()">-->
        <header id = "bg">
            <nav class = "navbar">
                <a href = "#" class = "logo">Ukiyo Sushi ツ</a>
                <ul>
                    <li><a href ="#" class = "about">About us</a></li>
                    <li><a href = "#" class = "menu">Menu</a></li>
                    <li><a href = "#" class = "services">Services</a></li>
                    <li><a href = "#" class = "contact">Contact</a></li>
                </ul>
            </nav> 
            <div class = "sushiPlatter">
                <h2 id = "caption">Chef's Special Sushi Platter</h2>
                <div class = "dots">
                    <span class = "dot" onclick = "imgslider(1); currentSlide(1);"></span>
                    <span class = "dot" onclick = "imgslider(2); currentSlide(2);"></span>                    <span class = "dot" onclick = "imgslider(3); currentSlide(3);"></span>
                </div>
                <a href = "#">View Menu</a>
            </div>
            </header>
        <section class = "description">
            <div class = "topRow">
                <dl class = "adress">420 High Street, Houston, Texas 77075</dl>
                <dl class = "phoneNumber">(832)-123-4567</dl>
                <dt>Lunch: </dt>
                <dl class = "hours">12:00pm - 4:00pm</dl>
                <dt>Dinner: </dt>
                <dl class = "hours">6:00pm - 10:30pm</dl>
            </div>   
            <div class = "imageDiv">
                <span>Welcome to Ukiyo Sushi ^_^</span>
                <figure>
                    <img src = "img/lantern.jpg" class = "descImg">
                    <figcaption  class = "imgCap">Ukiyo Sushi is a japanese sushi restaurant that was established in Houston, Texas in 2010. Due to our excellent customer service and quality of food, we have built a reputation as one of the best sushi restauraunts in the greater Houston area. </figcaption  class = "imgCap">
                </figure>
            </div> 
        </section>
    </body>
var imageIndex = 1;
document.body.addEventListener("load", onStart);

function onStart(){
   buttonClick(imageIndex);
}

function currentSlide(n)
{
   buttonClick(imageIndex = n);
}

function buttonClick(n){
   var i;
   var dot = document.getElementsByClassName("dot");
   if(n > dot.length){ imageIndex = 1}
   if(n < 1){imageIndex = dot.length}
   for(i = 0; i < dot.length; i++){       /*removes the active class for the whole dot class*/
      dot[i].classList.remove("active");
   }
   dot[imageIndex -1].className += " active";
}

JavaScript : JavaScript :

    var imageIndex = 1;
    document.body.addEventListener("load", onStart);

    function onStart(){
       buttonClick(imageIndex);
    }

    function currentSlide(n)
    {
       buttonClick(imageIndex = n);
    }

    function buttonClick(n){
       var i;
       var dot = document.getElementsByClassName("dot");
       if(n > dot.length){ imageIndex = 1}
       if(n < 1){imageIndex = dot.length}
       for(i = 0; i < dot.length; i++){       /*removes the active class for the whole dot class*/
          dot[i].classList.remove("active");
       }
       dot[imageIndex -1].className += " active";
    }

Answer 1

Looked around a bit a tested it out and it works, instead of using an event listener on the body I just put one on the window itself and it works.环顾四周，对其进行了测试，它可以正常工作，而不是在主体上使用事件侦听器，而是将一个事件侦听器放在窗口本身上，并且可以正常工作。 Thanks for pointing me in the right direction.感谢您为我指明正确的方向。

Solution:解决方案：

var imageIndex = 1;
window.addEventListener("load", onStart);

function onStart(){
   buttonClick(imageIndex);
}

function currentSlide(n)
{
   buttonClick(imageIndex = n);
}

function buttonClick(n){
   var i;
   var dot = document.getElementsByClassName("dot");
   if(n > dot.length){ imageIndex = 1}
   if(n < 1){imageIndex = dot.length}
   for(i = 0; i < dot.length; i++){       /*removes the active class for the whole dot class*/
      dot[i].classList.remove("active");
   }
   dot[imageIndex -1].className += " active";
}

页面加载上的活动类未触发

问题描述

1 个解决方案

解决方案1
0 2020-01-01 13:25:11

页面加载上的活动类未触发

问题描述

1 个解决方案

解决方案1 0 2020-01-01 13:25:11

解决方案1
0 2020-01-01 13:25:11