• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed zewnętrzne zdarzenie onclik

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
0 głosów
438 wizyt
pytanie zadane 2 października 2023 w JavaScript przez TOWaD Mądrala (6,480 p.)
zamknięte 10 października 2023 przez TOWaD

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).

 

komentarz zamknięcia: Rozwiązane.

2 odpowiedzi

0 głosów
odpowiedź 3 października 2023 przez VBService Ekspert (256,600 p.)
wybrane 10 października 2023 przez TOWaD
 
Najlepsza

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;
  }
}

 

komentarz 3 października 2023 przez TOWaD Mądrala (6,480 p.)

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.

komentarz 5 października 2023 przez TOWaD Mądrala (6,480 p.)

@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;
                }

 

0 głosów
odpowiedź 2 października 2023 przez Comandeer Guru (607,060 p.)

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

komentarz 5 października 2023 przez VBService Ekspert (256,600 p.)
edycja 5 października 2023 przez VBService

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
});

 

komentarz 5 października 2023 przez TOWaD Mądrala (6,480 p.)
edycja 5 października 2023 przez TOWaD

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.

komentarz 5 października 2023 przez VBService Ekspert (256,600 p.)

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>

 

komentarz 6 października 2023 przez TOWaD Mądrala (6,480 p.)
Jeszcze raz bardzo wam dziękuję. Będę miał ściągę jak znowu zapomnę. Ale myślę, teraz to już niemożliwe.
komentarz 10 października 2023 przez TOWaD Mądrala (6,480 p.)
Dzięki Panowie.

Podobne pytania

0 głosów
2 odpowiedzi 227 wizyt
pytanie zadane 3 listopada 2017 w JavaScript przez David Sundkikngs Obywatel (1,180 p.)
+2 głosów
2 odpowiedzi 442 wizyt
pytanie zadane 26 kwietnia 2023 w JavaScript przez zbiku25 Gaduła (3,000 p.)
0 głosów
1 odpowiedź 179 wizyt

93,434 zapytań

142,429 odpowiedzi

322,662 komentarzy

62,799 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

...