JQuery -> Vanilla JS

pytanie zadane 25 września 2022 w JavaScript przez Pawel82 Użytkownik (740 p.)
zamknięte 26 września 2022 przez Pawel82

Witam chciałem przetłumaczyc kod z JQuery na Vanilla JS kod ma za zadanie zmieniać pliki css, ale nie wiem jak

zapisac $("head link#theme").attr("href", $(this).data("theme")); mogę prosić o pomoc

$("button[data-theme]").click(function(){
        $("head link#theme").attr("href", $(this).data("theme"));
    });

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="css/style.css" id="theme">
	<title>Theme css</title>
</head>
<body>
	<button data-theme="css/red.css">Red</button>
	<button data-theme="css/blue.css">Blue</button>

	<script>
		const btn = document.querySelectorAll('button[data-theme]');

		btn.forEach(btns => {
			btns.addEventListener('click', () => {
				
			});
		});
	</script>
</body>
</html>

komentarz zamknięcia: Znaleziono rozwiązanie

3 odpowiedzi

odpowiedź 25 września 2022 przez radek024 Szeryf (77,160 p.)

$("button[data-theme]").click(function(){
        $("head link#theme").attr("href", $(this).data("theme"));
    });

Przeanalizujmy sobie kod jQuery, ten który posiadasz:

Wybierz button posiadający atrybut data-theme
Dodaj nasłuchanie - po kliknięciu uruchom funkcję
Znajdź znacznik link w head i nadaj nową wartość dla atrybutu href.

To w sumie tyle. Na chwilę obecną Twój kod wyłapuje wszystkie znaczniki button, a następnie dla każdego z tych buttonów (tak myślę - w kodzie masz literówkę) dodajesz nasłuchiwanie na kliknięcie, które to z kolei wywołuje pustą funkcję.

W czym masz problem? Jeżeli potrafisz wybrać element oraz nasłuchiwać, to teraz pozostaje złapanie odpowiedniego link, a następnie zmiana wartości.

komentarz 25 września 2022 przez Pawel82 Użytkownik (740 p.)

Mam problem ze złapaniem i zmianą wartości w linku

komentarz 25 września 2022 przez radek024 Szeryf (77,160 p.)

Możesz użyć console.log() do sprawdzania w konosli (F12, ew. Zbadaj element - po prawym przycisku myszy, następnie Konsola) czy udało się złapać element. Metodę do użycia masz taką samą, chociaż wygodniej będzie querySelector zamiast querySelectorAll.

odpowiedź 25 września 2022 przez pablop76 VIP (123,180 p.)

odpowiedź 26 września 2022 przez VBService Ekspert (253,340 p.)
edycja 26 września 2022 przez VBService

W Twoim kodzie

btn.forEach(btns => {

używasz btns to jest odpowiednik (w pewnym uproszczeniu) $(this) (w oryginalnym zapisie Twojego kodu w jquery), więc możesz "zostawić" zapisany przez Ciebie do tej pory kod js. Zapis .data("theme")) to jest w js-ie dataset.theme, js dopuszcza, jeżeli jakiś atrybut już znajduje się w kodzie html bezpośrednie odwołanie się do niego (w tym przypadku href).

do "złapania" elementu link, możesz skorzystać z porady @pablop76

W head link masz id więc możesz pobrać go za pomocą getElementById

czyli np.

        const buttons = document.querySelectorAll('button[data-theme]');
 
        buttons.forEach(button => {
            button.addEventListener('click', _=> {
                const link = document.getElementById('theme');
                link.href = button.dataset.theme;   
            });
        });

komentarz 26 września 2022 przez ScriptyChris Mędrzec (190,190 p.)

js dopuszcza, jeżeli jakiś atrybut już znajduje się w kodzie html bezpośrednie odwołanie się do niego

Za mapowanie atrybutów do propertisów odpowiada DOM, a nie JS.

https://javascript.info/dom-attributes-and-properties

komentarz 26 września 2022 przez VBService Ekspert (253,340 p.)

Może zbyt potocznym językiem to ująłem, wiadomo (miałem na myśli), że np. w tym przypadku gdy użyjemy

 document.getElementById(...)

to zwrócona wartość jest obiektem opisującym obiekt elementu DOM pasujący do podanego identyfikatora.

BTW, odwoływanie się do kilku przykładowych atrybutów standardowych.

<style>
  img {
    width: 10em;
    height: 10em;
    border: 5px solid red;
  }
</style>

<img>
<pre></pre>

<script>
  const img = document.querySelector('img'),
        pre = document.querySelector('pre');

  async function demo() {
    attributes(); await sleep(2);
    img.src='';
    attributes(); await sleep(2);
    img.alt='img';
    attributes(); await sleep(2);
    img.title='title';
    attributes(); await sleep(2);
    img.style='rotate: 180deg; border-color: orange';
    attributes();
  }

  demo();

  function attributes() {
    console.log(img.attributes, img.attributes.length);
    pre.textContent += img.attributes + ' ' + img.attributes.length + '\n';
  }

  function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms * 1000));
  }
</script>