Nie działający kod js addEventListener

pytanie zadane 17 czerwca 2020 w JavaScript przez Marak123 Stary wyjadacz (11,190 p.)
zamknięte 19 czerwca 2020 przez Marak123

Napisałem coś takiego:

function nacisk(value){	
    klikanie_przyciskow(value); 
}
function klikanie_przyciskow(clic){
    var zmienna = document.querySelector(".przycisk_" + clic);
    
    zmienna.addEventListener("click", function(e){
        e.style.width = "40px";
        e.style.height = "40px";
        e.style.marginTop = "2%";
        e.style.marginRight = "1%";
        e.style.marginLeft = "3%";
        alert(e);
    });
    
    zmienna.addEventListener("mouseup", function(e){
        e.style.width = "45px";
        e.style.height = "45px";
        e.style.marginTop = "0%";
        e.style.marginRight = "0%";
        e.style.marginLeft = "1.5%";
        alert(e);
    });
}

Ale nie działają te funkcje addEventListener działa to tak ze 1 funkcja jest wywoływana przez onclicka a ta druga przez tą pierwszą potem 1 funkcja przekazuje numer onclicka do 2 funkcji i ta druga funkcja gdy kliknie się na diva to on sie zmniejszy a gdy sie puści klika to on się powiększy ale to nie działa wywolywanie funkcji działa ale nasłuchiwanie klika i odklika nie działa wie ktoś może dlaczego?

komentarz zamknięcia: nie wiem co napisać! Ma ktoś pomysł?

2 odpowiedzi

odpowiedź 17 czerwca 2020 przez Landu Stary wyjadacz (11,880 p.)
wybrane 18 czerwca 2020 przez Marak123

Najlepsza

Używasz addEventListener'a w zły sposób.

Event listener nasłuchuje wydarzenia, a po jego nastąpieniu wywołuję funkcję którą mu podsuniesz.

  const element = document.querySelector(".przycisk_" + clic);
   
  element.addEventListener("click", function(e) {
      e.target.style.width = "40px";
      e.target.style.height = "40px";
      e.target.style.marginTop = "2%";
      e.target.style.marginRight = "1%";
      e.target.style.marginLeft = "3%";
      alert(e);
  });
   
  element.addEventListener("mouseup", function(e){
      e.target.style.width = "45px";
      e.target.style.height = "45px";
      e.target.style.marginTop = "0%";
      e.target.style.marginRight = "0%";
      e.target.style.marginLeft = "1.5%";
      alert(e);
  });

komentarz 18 czerwca 2020 przez Marak123 Stary wyjadacz (11,190 p.)

Tam też myślałem ze może to być błędem dzięki

odpowiedź 17 czerwca 2020 przez VBService Ekspert (252,660 p.)
edycja 17 czerwca 2020 przez VBService



<html>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 2px solid black;
        cursor: pointer;
        margin: 10px 10px;
        padding: 5px;
        float: left;
        font-size: 14px;
        font-weight: bold;
    }
</style>
<script>
window.onload = function() {

const div = document.querySelectorAll('[class^="przycisk_"]');
// const div = document.querySelectorAll('[id^="przycisk_"]');

    div.forEach((div) => {
        div.addEventListener('click', ( {target} ) => {
            target.innerHTML = target.className;    // --> alert(e);
            target.style.width = "40px";
            target.style.height = "40px";
            target.style.marginTop = "2%";
            target.style.marginRight = "1%";
            target.style.marginLeft = "3%";
        });
    });

    div.forEach((div) => {
        div.addEventListener('mouseover', ( {target} ) => {
            target.innerHTML = target.className;    // --> alert(e);
            target.style.width = "45px";
            target.style.height = "45px";
            target.style.marginTop = "0%";
            target.style.marginRight = "0%";
            target.style.marginLeft = "1.5%";
        });
    });
};
</script>
<body>
    <div class="przycisk_1"></div>
    <div class="przycisk_2"></div>
    <div class="przycisk_3"></div>
    <div style="clear: both" class="przycisk_4"></div>
    <div class="przycisk_5"></div>
    <div class="przycisk_6"></div>
</body>
</html>