javascript parametrar

   function showElement(event) {
    let clicked = event.currentTarget

    //ge framsida och baksida value none och block
    clicked.querySelector('.front-view').style.display = 'none'
    clicked.querySelector('.back-view').style.display = 'block'
  }

  let cards = document.querySelectorAll('.card')

  cards.forEach(function(card) {
      card.addEventListener('click', showElement);
  })

När du säger "utifrån" tänker du på det här med "closures" då? Om jag förstår rätt så är "currentTarget" om vilket element som din händelselyssnare sitter fast på medan "target" är det faktiska DOM-elementet som "avfyrade" händelsen. T.ex. du kan ha en händelselyssnare på ett "ul" och klickar du på "li" (som förhoppningsvis finns inuti detta "ul") så kommer currentTarget säga "ul" medan target säger "li".

Det snurriga med addEventListener är att den vill ha en hel funktion som andra argument som den kan skicka vidare sitt "event object/händelseobjekt" till. Skulle du däremot ha showElement(argument) så kommer addEventListener att försöka skicka sitt händelseobjekt till returvärdet från showElement(argument) istället vilket inte kommer att fungera då den vill skicka ett händelseobjekt till en funktion och inte något annat.

Jag misstänker att addEventListener kontrollerar om "showElement" är en funktion genom:

if (typeof showElement === 'function')
{ 
// Provide the function showElement with the almighty Event Object as its only argument!
}
else throw new Error("Denied! Please provide a function that I can provide the Event Object with as the single argument!");

EDIT: Hypotetiskt talat skulle du kunna ha en funktion som ett returvärde i showElement(argument) då funktioner är "förstaklassens medborgare" (låter förfärligt uttryckt på svenska) i JavaScript och därmed kan hanteras som vanliga värden (t.ex. strängar, numeriska) men då kan det bli en hel del Func-ception!

Så förstår jag iaf JS just nu, och jag mycket väl ha fel. Jag kan lååångt ifrån allt vad som händer "bakom JS-kulisserna"!

Mvh,
WKL.

Nu är jag inte häller någon expert men kan visa ett exempel vad gällande exempelvis addEventListener.

Allt i Javascript är funktioner och objekts. cards använder sig av querySelectorAll som spottar ut en Array. Array har då en drös med prototyper, som är funktioner som finns tillgängliga, som exempelvis forEach som du använder. Det går till exempelvis inte att göra cards.toString() för den funktionen finns inte för Arrays. Medans om du hade gjort querySelector, så hade toString funkat men inte forEach.

Så vad du har gjort är att ha ropat på en annan function som heter addEventListener, som tar 2 parametrar, och beroende på de, så return'ar den ett objekt som du kan leka med.

Ett kodexempel så kanske det blir mer förståligt:

const element = document.querySelector('div');

element.__proto__.myCustomEvent = function(type, fn) {
  let myEvent = {
    enMassaOlikaSaker: 'obj, fn, stuff',
  }

  return fn(myEvent)
  }

element.myCustomEvent('click', function(myEvent) {
  console.log('myEvent:', myEvent) // { enMassaOlikaSaker: 'obj, fn, stuff' }
})

Ja, det där med Web API:er är intressant för i början av JS så är man (iaf jag) så van att koda för JS-kod som körs i webbläsaren att man inte inser att `document` tillhandahålls av webbläsaren och inte JS-språket i sig. Så när man då hoppar över till exempelvis NodeJS som är JS för backend så finns inte `document` för den tillhandahålls helt enkelt inte av NodeJS. Även console-klassen som körs i NodeJS gäller för terminalen i ens IDE och inte i webbläsaren trots att man kanske surfar in på en webbplats som tillhandahålls via NodeJS. Det måste då vara JS-filen som läses in av webbplatsen som NodeJS tillhandahållit som kan få console-klassen där då att skriva ut i webbläsarens egen konsol.

Det finns väldigt många små - men avgörande viktiga - detaljer i programmering som gör att man kan fastna på små saker. T.ex. tog det ca ett halvår innan det koppla för mig om skillnader mellan array-liknande arrayer och "riktiga" arrayer. Innan dess så trodde jag att det bara fanns arrayer och det var det så jag fattade inte varför jag inte kunde använda array-metoden forEach på alla mina document.QuerySelectorAll-lagrade variabler!

Och då ska vi inte ens prata om "this" som pekar på nuvarande objekt där nuvarande objekt beror på varifrån det körs och hela det är sitt eget "periodiska system" att hålla koll på! Välkommen att rätta mig i allt jag möjligen faktamässigt har sagt fel nu så inte andra oxå lär sig fel som jag kanske har gjort!

Mvh,
WKL.

forEach funkar.
https://imgur.com/a/xsCayPw