zewnętrzne zdarzenie onclik

Question

Tak z ciekawości, bo pewnie i tak na css class i z addeventlistener to zrobię,

ale czy da się to zrobić, żeby po wciśnięciu przycisku, wykonać polecenia w danych komórkach (np w dziesięciu)

element.insertAdjacentHTML(
  'beforeend','<td><div zewnetrzneZdarzenie_onclik=sumsubrow(this)></div></td>'
  );

(keypress pewnie by zadziałał, ale wolałbym onclik, ale bez formularza).

 

Answer 1

Chodzi mi o coś takiego ...
 

let button = document.getElementById('z_sumuj');
button.addEventListener('click',sum());
 function sum () {
    ...
 }

Niestety nie działa. Nie widzi dodanych +. Node list 3 zamiast 5 które są w Inspektorze.
 

 

Sprawdź coś takiego jak Event Delegation

 

sprawdź taki zapis

[ kod on-line ]

<table>
  <thead>
    <tr>
      <td><button id="add-subrows">+</button></td>
    </tr>
  </thead>
  <tbody>
    <tr class="subrows">
      <td>
        <input type="number" value="1"><button>-</button>          
      </td>
    </tr>
    <tr class="subrows">
      <td>
        <input type="number" value="2"><button>-</button>          
      </td>
    </tr>
    <tr class="subrows">
      <td>
        <input type="number" value="3"><button>-</button>          
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>
        <button id="sum-all">Dodaj wszystkie</button>
        <span id="sum-all-result"></span>
      </td>      
    </tr>
  </tfoot>
</table>

const container = document.querySelector('table');
container.addEventListener('click', sumAll);
container.addEventListener('keydown', (e) => e.preventDefault());

function sumAll(e) {
  const element = e.target;

  if (element.matches('#add-subrows')) {
    const row = '<tr class="subrows"><td><input type="number" value="0"><button>-</button></td></tr>';
    container.querySelector('tbody').insertAdjacentHTML('beforeend', row);
  }
  if (element.matches('button') && element.textContent == '-') {
    element.closest('tr').remove();
    container.querySelector('#sum-all').click();
  }
  if (element.matches('input')) container.querySelector('#sum-all').click();
  if (element.matches('#sum-all')) {
    const subrows = [...container.querySelectorAll('tbody input')];
    const result = container.querySelector('#sum-all-result');
    if (subrows.length > 0)
      result.textContent = subrows.reduce((total, current) => total + (+current.value), 0);
    else
      result.textContent = 0;
  }
}

 

Comments

Dzięki za twój wysiłek.  Już chyba kiedyś podlinkowałeś event delegation :).

Jednak chyba nie rozwiązuje mojego problemu jeśli dobrze rozumiem twój kod.

1) Matches jest do poprawnego warunku, by nie było błędu tego jeszcze nie zrobiłem,

2) Ale do pola i tak dostajesz się selektorem.

3) Do reduce jeszcze nie doszedłem, na razie się zaczął sypać kod, błędu logicznego nie znalazłem. I inspektor żadnych nie wyrzuca.

4) Podejrzewam ze może będzie trzeba użyć coś w stylu Promises.

link do mojego kodu (sorki straszny tam bałagan na razie panuje).

Oblicz jest na górze,  ale po załadowaniu strony wywołuje funkcje multi... a nie powinnen.

---

@VBService, Te if mnie natchnęło i znalazłem winnego:

 let sumes = document.querySelectorAll(".sum");
let sum = row.querySelector(".sum>div ");
           
                if (sum) {
                    console.log("sum=", sum.innerText);
                    sum.innerText = input[0].value * input[1].value;
                }

 

Answer 2

Każdy element ma metodę click() – być może ona wystarczy?

Comments

Nie chcę  10 razy klikać tylko raz i wykonać do dziesięciu komórek.

---

No ale jeśli każda komórka ma zadeklarowany onclick, to po kliknięciu dowolnej można wywołać click() dla każdej. Ze strony użytkownika będzie to jeden klik.

Można też bezpośrednio wywołać onclick:

komorka.onclick();

 

---

Chodzi mi o coś takiego tylko, żeby tyle tych selektorów nie używać.

let button = document.getElementById('z_sumuj');
button.addEventListener('click',sum());
 function sum () {
    const subrows= document.querySelectorAll(".subrows");
    for (row of subrows) {
        let input=row.querySelectorAll("td > input");

        let sum = row.querySelector(".sum");
        sum.innerText= input[0].value+input[1].value;
    }
 }
  

Edit: Rzeczywiście może nie potrzebnie kombinuję, ten co napisałem wygląda przyzwoicie.

Niestety nie działa. Nie widzi dodanych +. Node list 3 zamiast 5 które są w Inspektorze.

Dziś tego nie rozwiąże. To chyba będzie większy problem. 

---

Sprawdź coś takiego jak Event Delegation

---

Zastanawia mnie czemu to działa

  btn.addEventListener("click", () => multiplaycolumn());

a to już nie

 btn.addEventListener("click", multiplaycolumn());
//lub
 btn.onclick = "multiplaycolumn()";

 

---

Bo funkcja() od razu wywołuje daną funkcję, więc w tym drugim przypadku jako listener dodajesz nie tę funkcję, ale wynik jej wykonania.

W pierwszym przypadku przekazujesz funkcję, która wywołuje multiplaycolumn. Można to zapisać jako

btn.addEventListener("click", () => {
    multiplaycolumn();
});

Teraz lepiej widać, że jest tam dodatkowa funkcja, opatulająca samo wywołanie.

---

btn.addEventListener("click", multiplaycolumn());

ten zapis powoduje, że do zdarzenia click zostaje przypisany wynik działania wskazanej funkcji w tym przypadku multiplaycolumn() a nie wywoływanie funkcji w momencie kliknięcia.

btn.onclick = "multiplaycolumn()";

z kolei to przypisanie nie jest prawidłowe. String "multiplaycolumn()" zostaje przypisany do onclick, ale nie jest to poprawna forma przypisania funkcji do obsługi zdarzenia. Funkcja nie zostanie wywołana po kliknięciu, ponieważ jest traktowana jako ciąg znaków, a nie jako funkcja.

 

poprawny zapis

btn.addEventListener("click", multiplaycolumn);

btn.onclick = multiplaycolumn;

 

ten zapis

btn.addEventListener("click", () => multiplaycolumn());

function  multiplaycolumn() {
  // ... kod funkcji multiplaycolumn
}

jest w pewnym sensie równoznaczny z takim zapisem (oprócz tego co podał @Comandeer)

btn.addEventListener("click", () => {
    // ... kod funkcji multiplaycolumn
});

lub

btn.addEventListener("click", function() {
    // ... kod funkcji multiplaycolumn
});

lub

btn.addEventListener("click", _=> {
    // ... kod funkcji multiplaycolumn
});

 

---

Dzięki. Przepraszam za tak banalnie pytania. Za rzadko używam JS.

Ale próbowałem na wszelkie sposoby i uruchamiał się przycisk bez wciśnięcia, bez nawiasów też, widocznie coś innego było skopane, że to nie działało jak trzeba. U Pana Mirka przecież też to było. Ale wydawało mi się że gdzieś widziałem z nawiasami stąd moje pytanie.

Całe szczęście że już przebrnąłem ten etap i działa jak trzeba. Dużo trudniejszy przede mną .print()I trochę logiki.

Scraping cen to już sobie odpuszczę.

Tak że, nie zamykam pytania coś może dorzucę.

Te błędy pewnie wynikają, że mi się spieszyło a wyszło baaardzo wolno i nie potrzebne.

 

edit: Sory u Pana Mirka jest <... onclick="sprawdz()"> i działa link, to jednak mnie oczy nie myliły, i chyba na którymś z przykładów MDN widziałem taki onclick. W tagach script nie przeczę może być inaczej.

Nie mniej dzięki, za pomoc, sama dyskusja powoduje, że szare komórki działają lepiej. I dużo łatwiej rozwiązuje się problemy.

---

Sory u Pana Mirka jest <... onclick="sprawdz()"> i działa link, to jednak mnie oczy nie myliły

bo w przytoczonym przez Ciebie przykładzie od p. Mirka zapis zdarzenia onclick jest atrybutem elementu w tym przypadku input a wartość dla atrybutu zapisuje się m. in. najczęściej w cudzysłowach.

 

<button id="b1" onclick="abc(event)">b1</button>
<button id="b2">b2</button>
<button id="b3">b3</button>
<button id="b4">b4</button>
<button id="b5">b5</button>
<button id="b6">b6</button>

<!-- wersja bez cudzysłowów -->
<button id=b7 onclick=abc(event)>b7</button>
<button id='b8' onclick='abc(event)'>b8</button>

<button id="b9">b9</button>
<button id="b10">b10</button>
<button id="b11">b11</button>
<button id="b12">b12</button>
<button id="b13">b13</button>


<script>
  const b2 = document.querySelector('#b2');
  b2.onclick = abc;
  
  const b3 = document.querySelector('#b3');
  b3.addEventListener('click', abc);
  
  const b4 = document.querySelector('#b4');
  b4.addEventListener('click', () => {
      abc(event);
  });
  
  const b5 = document.querySelector('#b5');
  b5.addEventListener('click', function() {
      abc(event);
  });  
 
  const b6 = document.querySelector('#b6');
  b6.addEventListener('click', _ => {
      abc(event);
  });  

  const b9 = document.querySelector('#b9');
  b9.onclick = () => { abc(event); };
  
  const b10 = document.querySelector('#b10');
  b10.onclick = function() { abc(event); };
    
  const b11 = document.querySelector('#b11');
  b11.onclick = _ => { abc(event); };  
  
  
  const b12 = document.querySelector('#b12');
  b12.onclick = () => (abc(event));
    
  const b13 = document.querySelector('#b13');
  b13.onclick = _ => (abc(event));
  
  function abc(e) {
    alert(e.target.id);
  }
</script>

 

---

Jeszcze raz bardzo wam dziękuję. Będę miał ściągę jak znowu zapomnę. Ale myślę, teraz to już niemożliwe.

---

Dzięki Panowie.