如何从OnClick按钮更改为EventListener？（包括教）

发布于 2025-02-04 23:26:07 字数 9756 浏览 2 评论 0原文

我在从OnClick转换为活动听众方面遇到了麻烦。 [这里的图片链接：我想更改此投资组合按钮，以免被关闭] [1]我尝试了我知道它需要去foreach的所有内容，因为它是节点列表，所以我做到了，而且它不起作用。比我用onclick将代码恢复正常，而且正在正常。但是我需要活动听众。

let menu = document.querySelector('.header ul');
let btn = document.querySelector('.button');

btn.addEventListener("click" , () => {
    if(btn.innerText === 'MENU') {       //uzeli smo btn i premenili mu ime u menu innerTextom 
        menu.style.display = 'block'; //zatim pisemo da ako je btn jednako menu da bude display block
        btn.innerText ='CLOSE'; 
           // i kad klikenmo na menu da se ispise close, da bi zatvorili
   

    }else{
        menu.style.display = 'none';      
        btn.innerText ='MENU';
        }
});

//SLIDER galerija 

let rightBtn = document.querySelector('#right-btn');      //selektujemo dugmice za slider levo i desno
let leftBtn = document.querySelector('#left-btn');
let pictures = document.querySelectorAll('.slider-images img')

let imgNum = 0;  //krecemo sa pozicije nula

rightBtn.addEventListener("click", ()=> {
    displayNone()        //ovde pozivamo funkciju koju smo dole pre toga napravili za slider
    imgNum++;            // stavljamo ++ da bi se dodala svaki put po jedna slika

    if (imgNum === pictures.length){   //ako smo dobili da je broj slika 3, merimo lengtom
                                       //onda ga vrati opet na nulu
        imgNum = 0;
    }
    pictures[imgNum].style.display = 'block';  // koja se iz none display u block
})
leftBtn.addEventListener("click", ()=> {
    displayNone();                 
    imgNum--;                      
    if (imgNum === -1){                    //-1 uvek vrati za pojednu nazad ne idi dalje od 2 
        imgNum = pictures.length - 1;
    }

    pictures[imgNum].style.display = 'block';
   });

   //zatim ovde pravimo fuknciju
   //ova funkcija krije slike
   const displayNone = () => {
       pictures.forEach((img) => {
        img.style.display ='none';
       })

   }

   // ----------PORTFOLIO---------------

//Uzimamo dugme button funkcijom i stavljamo argument zato sto u htmlu imamo THIS

const portfolioSort = (button) => {
    let category = button.getAttribute('data-category');   // uzimamo atribut buttona i dispaly text
    let portfolioItems = document.querySelectorAll('.portfolio-single-item');
    
    portfolioItems.forEach((item) => {
        item.style.display ='none';
    });

   if(category === 'sve') {
       portfolioItems.forEach((item) => {
            item.style.display = 'block'
       })

       portfolioItems.forEach((item) => {
           if(item.getAttribute('data-category').includes(category)) {
               item.style.display = 'block';
           }
       })
   } 

    };
          
     
     
  
     
    



//-------MODAL BUTTON--------

    let openmodal = document.querySelector('.modal-section button')
    let modalWindow = document.querySelector('.popup-modal');
    let overlay = document.querySelector('.overlay');
    openmodal.addEventListener("click" ,()=>{
    modalWindow.style.display = 'block';
    overlay.style.display = 'block';
    });


// zatvaramo modal 
    let closemodal = document.querySelector('.popup-modal button')
     modalWindow = document.querySelector('.popup-modal');
     overlay = document.querySelector('.overlay');
    closemodal.addEventListener("click", ()=>{ 
    modalWindow.style.display = 'none';
    overlay.style.display = 'none';
})

<!DOCTYPE html>
<html>
<head>
    <title>Meni Slider Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


    <div class="header">
        <img src="img/logo.png">

        <button class="button">MENU</button>

        <ul>
            <li><a href="#">Početna</a></li>
            <li><a href="#">O nama</a></li>
            <li><a href="#">Usluge</a></li>
            <li><a href="#">Galerija</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>

    <h2>Galerija</h2>

    <div class="slider-wrapper">
        <button id="left-btn"><i class="arrow"></i></button>
        <div class="slider-images">
            <img src="img/slide1.jpg">
            <img src="img/slide2.jpg">
            <img src="img/slide3.jpg">
        </div>
        <button id="right-btn"><i class="arrow"></i></button>
    </div>

    <h2>Portfolio</h2>

    <div class="portfolio-wrapper">
        <div class="portfolio-categories">
            <button data-category='sve' onclick="portfolioSort(this)">Sve</button>
            <button data-category='restorani' onclick="portfolioSort(this)" class="brown">Restorani</button>
            <button data-category='hoteli' onclick="portfolioSort(this)" class="blue">Hoteli</button>
            <button data-category='korporacije' onclick="portfolioSort(this)" class="green">Korporacije</button>
            <button data-category='ostalo' onclick="portfolioSort(this)" class="rose">Ostalo</button>
            <button data-category='bazeni' onclick="portfolioSort(this)" class="purple">Bazeni</button>
            <button data-category='skijaske-staze'onclick="portfolioSort(this)"class="yellow">Skijaske Staze</button>
        </div>

        <div class="portfolio-items">
            <div class="portfolio-single-item blue" data-category='hoteli'>
                <h3>Hotel 1</h3>
            </div>

            <div class="portfolio-single-item rose" data-category='ostalo'>
                <h3>Startup</h3>
            </div>

            <div class="portfolio-single-item blue" data-category='hoteli, restorani'>
                <h3>Hotel & Restoran</h3>
            </div>

            <div class="portfolio-single-item green" data-category='korporacije'>
                <h3>Korporacija 1</h3>
            </div>

            <div class="portfolio-single-item brown" data-category='restorani'>
                <h3>Restoran 1</h3>
            </div>

            <div class="portfolio-single-item rose" data-category='ostalo'>
                <h3>XYZ Orgranizacija</h3>
            </div>

            <div class="portfolio-single-item blue" data-category='hoteli'>
                <h3>Hotel 2</h3>
            </div>

            <div class="portfolio-single-item green" data-category='korporacije'>
                <h3>Korporacija 2</h3>
            </div>

            <div class="portfolio-single-item brown" data-category='restorani'>
                <h3>Restoran 2</h3>
            </div>
            <div class="portfolio-single-item purple" data-category='bazeni'>
                <h3>Bazen 1</h3>
            </div>
            <div class="portfolio-single-item purple" data-category='bazeni'>
                <h3>Bazen 2</h3>
            </div>
            <div class="portfolio-single-item yellow" data-category='skijaske-staze'>
                <h3>Staza 1 </h3>
            </div>
            <div class="portfolio-single-item yellow" data-category='skijaske-staze'>
                <h3>Staza 2 </h3>
            </div>
        </div>
    </div>

    <div class="modal-section">
        <button >Modal Button</button>
    </div>


    <div class="popup-modal">
        <button id="closeModal">X</button>

        <h4>Modal Title</h4>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="overlay"></div>
    <div class="modal-section">
        <button onclick="openModal()">Modal Button</button>
    </div>


    <div class="popup-modal">
        <button id="closeModal" onclick="closeModal()">X</button>

        <h4>Modal Title</h4>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="overlay"></div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

原文

I have trouble switching from onclick to event listener. [Picture link here: I want to change this portfolio buttons to not be onclick][1]I tryed everything i know that it needs to go trough forEach because it's node list, so i did that and it's not working. Than i write my code back to normal with onclick and it's working. But i need event listener instead.

let menu = document.querySelector('.header ul');
let btn = document.querySelector('.button');

btn.addEventListener("click" , () => {
    if(btn.innerText === 'MENU') {       //uzeli smo btn i premenili mu ime u menu innerTextom 
        menu.style.display = 'block'; //zatim pisemo da ako je btn jednako menu da bude display block
        btn.innerText ='CLOSE'; 
           // i kad klikenmo na menu da se ispise close, da bi zatvorili
   

    }else{
        menu.style.display = 'none';      
        btn.innerText ='MENU';
        }
});

//SLIDER galerija 

let rightBtn = document.querySelector('#right-btn');      //selektujemo dugmice za slider levo i desno
let leftBtn = document.querySelector('#left-btn');
let pictures = document.querySelectorAll('.slider-images img')

let imgNum = 0;  //krecemo sa pozicije nula

rightBtn.addEventListener("click", ()=> {
    displayNone()        //ovde pozivamo funkciju koju smo dole pre toga napravili za slider
    imgNum++;            // stavljamo ++ da bi se dodala svaki put po jedna slika

    if (imgNum === pictures.length){   //ako smo dobili da je broj slika 3, merimo lengtom
                                       //onda ga vrati opet na nulu
        imgNum = 0;
    }
    pictures[imgNum].style.display = 'block';  // koja se iz none display u block
})
leftBtn.addEventListener("click", ()=> {
    displayNone();                 
    imgNum--;                      
    if (imgNum === -1){                    //-1 uvek vrati za pojednu nazad ne idi dalje od 2 
        imgNum = pictures.length - 1;
    }

    pictures[imgNum].style.display = 'block';
   });

   //zatim ovde pravimo fuknciju
   //ova funkcija krije slike
   const displayNone = () => {
       pictures.forEach((img) => {
        img.style.display ='none';
       })

   }

   // ----------PORTFOLIO---------------

//Uzimamo dugme button funkcijom i stavljamo argument zato sto u htmlu imamo THIS

const portfolioSort = (button) => {
    let category = button.getAttribute('data-category');   // uzimamo atribut buttona i dispaly text
    let portfolioItems = document.querySelectorAll('.portfolio-single-item');
    
    portfolioItems.forEach((item) => {
        item.style.display ='none';
    });

   if(category === 'sve') {
       portfolioItems.forEach((item) => {
            item.style.display = 'block'
       })

       portfolioItems.forEach((item) => {
           if(item.getAttribute('data-category').includes(category)) {
               item.style.display = 'block';
           }
       })
   } 

    };
          
     
     
  
     
    



//-------MODAL BUTTON--------

    let openmodal = document.querySelector('.modal-section button')
    let modalWindow = document.querySelector('.popup-modal');
    let overlay = document.querySelector('.overlay');
    openmodal.addEventListener("click" ,()=>{
    modalWindow.style.display = 'block';
    overlay.style.display = 'block';
    });


// zatvaramo modal 
    let closemodal = document.querySelector('.popup-modal button')
     modalWindow = document.querySelector('.popup-modal');
     overlay = document.querySelector('.overlay');
    closemodal.addEventListener("click", ()=>{ 
    modalWindow.style.display = 'none';
    overlay.style.display = 'none';
})

<!DOCTYPE html>
<html>
<head>
    <title>Meni Slider Portfolio</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>


    <div class="header">
        <img src="img/logo.png">

        <button class="button">MENU</button>

        <ul>
            <li><a href="#">Početna</a></li>
            <li><a href="#">O nama</a></li>
            <li><a href="#">Usluge</a></li>
            <li><a href="#">Galerija</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </div>

    <h2>Galerija</h2>

    <div class="slider-wrapper">
        <button id="left-btn"><i class="arrow"></i></button>
        <div class="slider-images">
            <img src="img/slide1.jpg">
            <img src="img/slide2.jpg">
            <img src="img/slide3.jpg">
        </div>
        <button id="right-btn"><i class="arrow"></i></button>
    </div>

    <h2>Portfolio</h2>

    <div class="portfolio-wrapper">
        <div class="portfolio-categories">
            <button data-category='sve' onclick="portfolioSort(this)">Sve</button>
            <button data-category='restorani' onclick="portfolioSort(this)" class="brown">Restorani</button>
            <button data-category='hoteli' onclick="portfolioSort(this)" class="blue">Hoteli</button>
            <button data-category='korporacije' onclick="portfolioSort(this)" class="green">Korporacije</button>
            <button data-category='ostalo' onclick="portfolioSort(this)" class="rose">Ostalo</button>
            <button data-category='bazeni' onclick="portfolioSort(this)" class="purple">Bazeni</button>
            <button data-category='skijaske-staze'onclick="portfolioSort(this)"class="yellow">Skijaske Staze</button>
        </div>

        <div class="portfolio-items">
            <div class="portfolio-single-item blue" data-category='hoteli'>
                <h3>Hotel 1</h3>
            </div>

            <div class="portfolio-single-item rose" data-category='ostalo'>
                <h3>Startup</h3>
            </div>

            <div class="portfolio-single-item blue" data-category='hoteli, restorani'>
                <h3>Hotel & Restoran</h3>
            </div>

            <div class="portfolio-single-item green" data-category='korporacije'>
                <h3>Korporacija 1</h3>
            </div>

            <div class="portfolio-single-item brown" data-category='restorani'>
                <h3>Restoran 1</h3>
            </div>

            <div class="portfolio-single-item rose" data-category='ostalo'>
                <h3>XYZ Orgranizacija</h3>
            </div>

            <div class="portfolio-single-item blue" data-category='hoteli'>
                <h3>Hotel 2</h3>
            </div>

            <div class="portfolio-single-item green" data-category='korporacije'>
                <h3>Korporacija 2</h3>
            </div>

            <div class="portfolio-single-item brown" data-category='restorani'>
                <h3>Restoran 2</h3>
            </div>
            <div class="portfolio-single-item purple" data-category='bazeni'>
                <h3>Bazen 1</h3>
            </div>
            <div class="portfolio-single-item purple" data-category='bazeni'>
                <h3>Bazen 2</h3>
            </div>
            <div class="portfolio-single-item yellow" data-category='skijaske-staze'>
                <h3>Staza 1 </h3>
            </div>
            <div class="portfolio-single-item yellow" data-category='skijaske-staze'>
                <h3>Staza 2 </h3>
            </div>
        </div>
    </div>

    <div class="modal-section">
        <button >Modal Button</button>
    </div>


    <div class="popup-modal">
        <button id="closeModal">X</button>

        <h4>Modal Title</h4>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="overlay"></div>
    <div class="modal-section">
        <button onclick="openModal()">Modal Button</button>
    </div>


    <div class="popup-modal">
        <button id="closeModal" onclick="closeModal()">X</button>

        <h4>Modal Title</h4>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="overlay"></div>

    <script type="text/javascript" src="script.js"></script>
</body>
</html>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浮生未歇 2025-02-11 23:26:09

给他们全部带有相同名称的课程，然后用 document.queryselectall 并将EventListener添加到其中，例如：

[...document.querySelectorAll('.myClassName')].forEach(v => v.addEventListener('click', portfolioSort));

give them all a class with the same name, then select them with document.querySelectAll and add the EventListener to it, like:

[...document.querySelectorAll('.myClassName')].forEach(v => v.addEventListener('click', portfolioSort));

回复收藏 0 原文

~没有更多了~

关于作者

荆棘i

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

如何从OnClick按钮更改为EventListener？（包括教）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如何从OnClick按钮更改为EventListener？ （包括教）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

櫻之舞

弥枳

m2429

寻找一个思念的角度

野却迷人

我怀念的。

友情链接

如何从OnClick按钮更改为EventListener？（包括教）

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。