Dropdown? Kod JS

Question

Wiecie jak poprawić ten kod żeby działał? Bo coś mi nie idzie z tym JS (proszę o łopatologiczne wytłumaczenie)

dropdown-btn.addEventListener("click", function(myFunction) {
document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
if (!event.target.matches('.dropdown-btn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

dropdown-btn.addEventListener("click", function(myFunction) { jest na pewno zle napisane i nie wiem jak, dużo szukałem i nic...

Answer 1

dropdown-btn.addEventListener("click", function() // <- tutaj przekazujesz funkcje anonimowa - odnosnie [1@]
{
  document.getElementById("myDropdown").classList.toggle("show");
}

dropdown-btn.addEventListener("click", cosTam) // <- a jak nie chcesz anonimowej to funkcje przekazujesz tak - nazwa funkcji bez () - odnoscie [1@]

function cosTam()
{
  document.getElementById("myDropdown").classList.toggle("show");
}

// teraz tak, JS nie wie co to jest 'dropdown-btn' (tak jak naukowym jezykiem opisywal to Tomek) - nic mu to nie mowi, a wiec:

var element = document.getElementById("dropdown-btn"); // strzelam ze jest to ID a nie klasa (w przypadku klasy uzyj  document.getElementsByClassName("dropdown-btn");
//czyli teraz to bedzie wygladac tak:

element.addEventListener("click", function()
{
  document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event)
{
  if (!event.target.matches('.dropdown-btn'))
  {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    for (var i = 0; i < dropdowns.length; i++)
    {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show'))
      {
        openDropdown.classList.remove('show');
      }
    }
  }
}

// musisz dodac html w codepen/fiddlu jak chcesz aby zerknal jak wyglada reszta

Comments

To jest to samo nadal... Nie wiem jak wytłumaczyć, może 

var elementb = document.getElementsByClassName("dropdown-btn2")[0];

usuń to z kodu i zobaczysz że nie działa :) wywołujesz nadal osobno każdy

---

No ale chciales DWA dropdowny, nie? Jak ma byc jeden to poprzedni kod chyba dzialal poprawnie.

---

Ciągle nie rozumiesz. Na tym kodzie co podajesz MAX działają 2 dropdowny a ja chcę żeby działała ich NIESKOŃCZONA liczba

---

https://jsfiddle.net/spamator12/dqbkm1tv/ - musisz stargetowad boxa, ktory ma sie rozwinac. Skad JS ma wiedziec, ktore elementy rozwinac? To jest to co tlumaczyl Ci Tomek.

 

To nei mzoe wyglada cw ten sposob - https://jsfiddle.net/spamator12/pxcm07bf/

---

przy czyms takim - rozwijac ci sie beda WSZYSTKIE listy - https://jsfiddle.net/spamator12/k9xnhuqt/

 

rozumiesz, ze to co chcesz zrobic, nei zadziala?

Answer 2

Próbujesz zrobić operację matematyczną odejmowania wartości zmiennej dropdown od zwrotki metody addEventListener :)

Przypisz sobie np. do jakieś stałej referencję do elementu na którym chcesz nasłuchiwać eventu click i na tej referencji wywołaj metodę addEventListener. Dalej, funkcji zwrotnej przekazujesz jaki parametr nazwany myFunction ale nigdzie go nie używasz, po co on ma być?

Comments

.dropdown-btn.addEventListener("click", function(myFunction) {
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
}
window.onclick = function(event) {
if (!event.target.matches('.dropdown-btn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}

Nie wiem coś takiego i nadal zle

---

napisałem Ci przecież, że metoda addEventListener odpalana jest na referencji do obiektu DOM. Wiesz co to referencja bo używasz dalej metody getElementById, nie kopiuj kodu w ciemno tylko lepiej naucz się co dany fragment robi :)

Pobierz referencję np. getElementById, querySelector czy w dowolny inny sposób i na referencji wywołaj addEventListener... a tak na marginesie to zaglądałeś w ogóle do konsoli...? Zobacz... znajdziesz tam ciekawe informacje wprost mówiące gdzie jest błąd :)

---

druga sprawa, po co w funkcji zwrotnej definiujesz kolejną funkcję? a sam callback zwraca undefined?

---

https://kursjs.pl/kurs/dom/dom.php

---

<style>

.dropdown-btn {
border: none;
transition: 500ms;
border-bottom: 1px solid #ccc !important;
background: #fff;
color: #000;
padding: 10px;
font-size: 16px;
cursor: pointer;
}

.dropdown-btn:hover {
transition: 500ms;
border-bottom: 1px solid #00a3a3 !important;
color: #00a3a3;
}

.dropdown {
position: relative;
display: inline-block;
}

.dropdown-content {
opacity: 0;
pointer-events: none;
top: -30px;
position: absolute;
transition: 500ms;
background-color: #fff;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-content li {
color: #000;
padding: 12px 16px;
text-decoration: none;
display: block;
cursor: pointer;
transition: 500ms;
}

.dropdown li:hover {
background-color: rgba(0, 0, 0, 0.05);
transition: 500ms;
}

.show {
display: block;
opacity: 1;
top: 0px;
transition: 500ms;
pointer-events: all;
}

</style>

<div class="dropdown">
<span class="dropdown-btn"  id="btn">Dropdown</span>
<div id="myDropdown" class="dropdown-content">
<li>Dropdown 1</li>
<li>Dropdown 2</li>
<li>Dropdown 3</li>
</div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function() {
const btn = document.getElementById('btn');
document.getElementById("myDropdown").classList.toggle("show");
});}
}
window.onclick = function(event) {
if (!event.target.matches('.dropdown-btn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>

Nwm...