Wyświetlanie innerHTML w innym elemencie html

Question

let control = document.querySelectorAll(".control-button");
console.log(control);

function style(selector)
{
    document.querySelector('.code-controls__css').innerHTML=selector;
}

control.onclick = style(control.innerHTML);

Funcja ma za zadanie wyświetlić nazwę klikanego elementu (body/header) i wyświetlić w miejscu zmiennej undefined. Niestety, po kliknięciu w przyciski nic się nie dzieje

Comments

Zobacz, jakie błędy pokazuje konsola.

---

Problem w tym, że konsola nie pokazuje błędów

Answer 1

IMO jeżeli "używasz" document.querySelectorAll to przypisywanie wywołania funkcji style po onclick powinno wyglądać np. tak

const control = document.querySelectorAll('.control-button');

...

control[0].onclick = style; // button body - w kontekście Twojego obrazka
control[1].onclick = style; // button header

lub

const controls = document.querySelectorAll('.control-button');

...

for (const control of controls)
  control.onclick = style;

no i użyłbym textContent (w przypadku button-ów) a w funkcji style użyłbym e (event)

function style(e)
{
  document.querySelector('.code-controls__css').innerHTML = e.target.textContent;
}

lub gdy tylko chcemy użyć target

function style({target})
{
  document.querySelector('.code-controls__css').innerHTML = target.textContent;
}

 

 

P.S. zgaduję, że tych przycisków będzie więcej, wiec proponuje zastosowanie Event Delegation

[ on-line ]

const controls = document.querySelector('.button-controls');
controls.onclick = style;
 
function style(e) {
  if (e.target.matches('.control-button'))
    document.querySelector('.code-controls__css').innerHTML = e.target.textContent;
}

 

Answer 2

Do onclick przypisałeś wynik wywołania test(). Ty chcesz przypisać samą funkcję. Żeby przekazać do niej argumenty najlepiej byłoby zastosować tutaj funkcję anonimową:

control.onclick = () => style( control.innerHTML );

Przy okazji, polecam używać addEventListener() – choćby dlatego, że pozwala przypiąć wiele listenerów.

Answer 3

Nic się nie dzieje to robisz 1) wstawiasz alert(); pod zdarzenie - jak się odpali, idziesz dalej, to jest zawsze to co robisz na początku, ograniczasz obszar problematyczny. Potem wpinasz do wnętrza alertu, elementy które testujesz, i tak sprawdzasz je po kolei. Jak chcesz sprawdzić czy operujesz na przycisku to powinno się wyświetli HTML Button Element czy coś w tym stylu, dalej precyzujesz czy to ten przycisk czyli wyświetlasz innerText. I zwykle to rozwiązuje 99% problemów, bo najczęściej po prostu mylisz elementy.

Comments

" Dodatkowo jak wykorzystuje się biblioteki i frameworki pokroju Reacta i Angulara, to poniżej pewnego poziomu złożoności i tak się nie zejdzie," - i jak sobie odpowiedziałeś na to pytanie? Bo ja tak - sRWD project (ct8.pl)

---

Ale to nie jest pytanie – to jest stwierdzenie faktu. Zresztą Twoje rozwiązanie też nijak na to nie odpowiada, bo taki Angular narzuca całą strukturę aplikacji, zarządza nawigacją pomiędzu podstronami (routing), obsługuje formularze, udostępnia serwisy do komunikacji z backendem, ma własny system szablonów itd. To są dwie zupełnie różne klasy rozwiązań.

---

Zrobisz coś lepszego o Angulara? Masz pomysł na własne narzędzie? To co widziałeś (mam nadzieję) to jest początek  drogi. Milion możliwości. Liczy się, że cokolwiek robi  i to w miarę dobrze. "narzuca całą strukturę aplikacji" - tak wiem co oznacza termin "kontrola".

---

Byłbym w stanie napisać własny framework, ale to jest akurat całkowicie nieinteresujące dla mnie, wolę się bawić rzeczami typu bundlery lub po prostu eksperymentami w JS-ie i innych technologiach webowych.

Natomiast do tworzenia stron najczęściej wybieram generatory stron statycznych (Astro, 11ty, Jekyll…).

---

Ja ostatnio grę w javascript robiłem i przy 80% ukończenia stwierdziłem, że to bez sensu, bo nie mam narzędzi. Jedną dokończę ale 10 nie zrobię tak. Rozumiem, z Ciebie bardziej haker, a ze mnie twórca. A Orange zobacz co mi podobno zrobił  "Orange mi oznaczył Twoją stronę jako "phishingowa i wyłudzająca dane osobowe"."  tak mi na innym forum napisali. Zabawne co nie?