hiperlinki w javascript na buttonach przy użyciu addEventListener click event

Question

Witam, zaczynam przygodę z js, znalazłem jakieś zadanie w internecie i poszukuje odpowiedzi na nurtujące mnie od tygodnia pytanie. Otóż walczę z linkami do podstron / treści podstron w javascript. Nie chce używać <a href= w html bo to już opanowałem i chce spróbować stworzyć linki w js. 

Wymagania jakie są w zadanie, które trochę zmodyfikowałem to aby użyć XMLHttpRequest() i podstrony nie powinny być autonomicznymi dokumentami,  powinny zawierać w sobie jedynie treść, która ma zostać wklejona do głównego dokumentu. Coś w stylu, że zamiast po kliknięciu  w button przenosi mnie np. do  pliku main.css to zamiast tego pobiera zawartość pliku main.css i wkleja ją do #kontent powiedzmy w tagach 

 

<pre><code> treść pliku main.css </code></pre>

Przykładowy kod html:

<main>
   <nav class="nav">
                <button class="button button1" >HTML</button>

                <button class="button button1" >CSS</button>

                <button class="button button1">JavaScript</button>

                <button class="button button1" >PHP</button>

                <button class="button button1>SQL</button>
            </nav>
     <section id="kontent">
      ///treść
     </section >
<main>

Przykładowy kod js który jak na razie udało mi się zrobić:

function reqListener() {

    console.log(this.responseText);

  }  



const req = new XMLHttpRequest();

req.addEventListener("load", reqListener);

req.open("GET", "http://localhost/test/test.txt");

req.send();

 

Answer 1

To, czego najbardziej brakuje, to przypięcia tego żądania Ajaksowego do przycisków przy pomocy addEventListener(). Bo tak na oko samo żądanie powinno się wykonać. I gdy już dobierzesz się do zwracanej odpowiedzi (czyli this.responseText u Ciebie), to wystarczy wrzucić ją do wybranego elementu HTML przez textContent (względnie innerText).

Nie wiem też, czy na Twoim miejscu nie użyłbym Fetch API, bo jest zdecydowanie łatwiejsze do szybkiego ogarnięcia, niż stareńkie XMLHttpRequest.

No i przemyślałbym inną kwestię:

Nie chce używać <a href= w html bo to już opanowałem i chce spróbować stworzyć linki w js. 

To jest bardzo kiepski pomysł. Najprościej rzecz ujmując: nie da się odtworzyć linków w JS-ie. Choćby dlatego, że żadna przeglądarka nie pozwala już na wyświetlenie czegokolwiek w pasku stanu. A w takim Chrome czy Firefoksie po najechaniu na link w lewym dolnym rogu pokaże się adres, na który odsyła. Pomijając już tę kwestię, jest szereg innych problemów:

• obsługa klawiaturą – nawet jeśli weźmie się do tego button, to istnieje rozjazd, bo linki nie reagują na spację, podczas gdy przyciski tak. Trzeba by zatem nadpisać całe zachowanie klawiatury przycisków tak, żeby działały jak linki. No a jeśli nie będziemy tego robić na przyciskach, to zostaje cała kwestia focusu.
• identyfikacja w drzewku dostępności – przyciski są identyfikowane jako, well, przyciski. Trzeba im zmienić odpowiednio rolę, żeby wyglądały jak linki.
• sterowanie focusem – focus na link to jeden problem, ale jeśli mamy do czynienia z linkiem do kotwicy, to trzeba następnie przenieść użytkownika do odpowiedniego elementu poprzez zescrollowanie i przeniesienie focusu w odpowiednie miejsce.
• zmiana adresu i tytułu strony – link przenosi usera w inne miejsce, więc o to też trzeba zadbać. Taki link powinien zmieniać aktualny adres strony + tytuł (bo użytkownicy czytników ekranowych w taki sposób mogą wykryć, że zmieniła się podstrona).

A to są tylko problemy, które przychodzą mi tak na szybko do głowy. Pewnych rzeczy po prostu się nie robi, bo nie ma to sensu. IMO tutaj też bardziej pasowałyby linki, którym można po prostu zablokować domyślną akcję i użyć ich do wczytania podstron/plików Ajaksem.

Comments

 nie da się odtworzyć linków w JS-ie

da się i chyba już zaczynam łapać jak to zrobić, ale dzieki.

---

Nie, nie da się. Nie istnieją odpowiednie primitives, które pozwalałaby na odtworzenie linków 1:1.

---

W sensie można to zrobić ale jakoś na około

---

@Programator6909, dobrze Tobie radzi @Comandeer; 

window.location.href vs clicking on an Anchor

 

możesz śmiało używać <a> np.

    <ul>
      <li><a href="#" data-href="html">Html</a></li>
      <li><a href="#" data-href="css">Css</a></li>
      <li><a href="#" data-href="javascript">JavaScript</a></li>
      <li><a href="#" data-href="php">Php</a></li>
      <li><a href="#" data-href="sql">Sql</a></li>
    </ul>

proponuję użyć jeszcze Event Delegation

pełny przykład (razem z użyciem ajax-a) on-line.

 

---

    <ul>
      <li><a href="http://localhost/test/html.htm">Html</a></li>
      <li><a href="http://localhost/test/css.htm">Css</a></li>
      <li><a href="http://localhost/test/javascript.htm">JavaScript</a></li>
      <li><a href="http://localhost/test/php.htm">Php</a></li>
      <li><a href="http://localhost/test/sql.htm">Sql</a></li>
    </ul>

przykład on-line.

---

@VBService, skoro używasz linków, to… używaj linków. Nie ma absolutnie żadnego powodu, żeby je w taki sposób psuć (np. nie da się ich obecnie otworzyć w nowej karcie). Po prostu korzystaj z atrybutu [href], w którym będzie cały adres strony.

---

@Comandeer; masz rację, po "przespaniu" się z tematem, też doszedłem do tych samych wniosków choćby ze względu właśnie na

window.location.href vs clicking on an Anchor

If you have javascript disabled, none of the links would work

---

@VBService, ogl doszedłem do tego momentu przy pomocy innych forum i chatu gpt i mniej więcej działa

da się to zrobić jak się okazuje i zgaduje że da sie jakoś okodować otwieranie w nowej karcie ale i tak dzieki z pomoc.

function button() {

  const contentElement = document.querySelector('#kontent');
  
  contentElement.innerHTML = this.responseText;
  
}
  
  function loadContent(event) {
  
  const fileName = event.target.dataset.file;
  
  const req = new XMLHttpRequest();
  
  req.addEventListener("load", button);
  
  req.open("GET", `http://localhost/test/${fileName}`);
  
  req.send();
  
}
  
const buttons = document.querySelectorAll('.button');
  
buttons.forEach(button => {
  
  button.addEventListener('click', loadContent);
  
});
  

<nav class="nav">

                <button class="button button1" data-file="index.html">HTML</button>

                <button class="button button1" data-file="main.css">CSS</button>

                <button class="button button1" data-file="links.js">JavaScript</button>

                <button class="button button1" data-file="main.php">PHP</button>

                <button class="button button1" data-file="main.sql">SQL</button>

</nav>

GPT przydaje się przy nauce.