Keskustelu: Nettisivujen teko: Kohdenna JS funktio linkin osoittamaan diviin

Aloittelija tuskastuu, kun ei osaa mitään.

On <div class="menu"> ja sen sisällä linkkejä tyyliin <a href=#kappale1>Kappale 1</a>.

Miten kohdentaa klikkauksen käynnistämä funktio kunkin linkin hrefin osoittamaan diviin?

Osasinkohan edes esittää kysymyksen selvästi.

Osaisin tehdä jokaiselle linkille oman funktion, mutta mutta miten tehdä tuo yhdellä ainoalla funktiolla, joka kävisi aina linkkiä klikatessa sen saman linkin hrefistä katsomassa, mihin diviin se osoittaa ja kohdentaisi funktion siihen?

Yksi tapa on kirjoittaa funktio, joka ottaa parametrina halutun elementin. Tällöin funktiossa voidaan käsitellä juuri sitä haluttua elementtiä. Kirjoitin lyhyen fiddlen aiheesta

Teuro taisi nyt vastata ihan johonkin toiseen kysymykseen.

Alla koodirunko linkkien klikkausten kuunteluun. "Funktion kohdistaminen" ei sano minulle mitään, joten voit itse miettiä, miten täydentää koodia tekemään haluamiasi asioita. Funktioita ei kohdistella minnekään vaan niitä kutsutaan ja niille voi antaa erilaisia argumentteja.

function menu (menuElement) {
  function onLinkClick (event) {
    event.preventDefault()

    console.log('CLICKED', event.target)
  }

  const links = menuElement.querySelectorAll('a')

  for (const link of links) {
    link.addEventListener('click', onClickLink)
  }
}

(function () {
  menu(document.querySelector('[data-menu]'))
})()

<nav class="menu" data-menu>
  <a href="#foo">Foo</a>
  <a href="#bar">Bar</a>
</nav>

Pahoittelut väärästä sanastosta - ja ajattelutavasta. Tarkoitus oli, että klikkaus muuttaa divin näkyvyyttä (display block tai none) ja kyseinen div on aina se, joka on klikatun linkin hrefissä. Siihen voisi lisätä, että kun joku muu klikataan toisesta linkistä näkyväksi, niin muut menisivät samalla piiloon.

Nähdäkseni tuo kirjoittamani Fiddle tekee varsin täsmälleen sen mitä haluttiinkin.

Kiitoksia!

Jos halutaan nimenomaan käyttää sitä hrefiä eikä purkkaviritellä suorilla onclick-määreillä, olennainen tieto on varmasti se, että click-tapahtumassa this viittaa klikattuun linkkiin.

<a class="linkki-diviin" href="#foo">bar</a>
<div id="foo">bar</div>

<script>
function linkki_painettu(e) {
  e.preventDefault();
  const a = this;
  const id = a.href.substr(1); // #-merkki pois
  const div = document.getElementById(id);
  div.classList.add("linkki-painettu");
}
window.addEventListener("load", e => {
  for (const a of document.querySelectorAll("a.linkki-diviin")) {
    a.addEventListener("click", linkki_painettu);
  }
});
</script>