Java-Script Code understanding

RaulRogojan

Hi ,
can someone enplane me what this code does const modal = document.querySelector(button.dataset.modalTarget) and tell me how to read it .
This code is from

openModalButtons.forEach(button => {
  button.addEventListener('click', () => {
    const modal = document.querySelector(button.dataset.modalTarget)
    openModal(modal)
  })
})

I can't use the insert code , sorry .

(Added [code]...[/code] tags ~ MOD)

NogDog

RaulRogojan I can't use the insert code , sorry .

Just surround it with [code]...[/code] tags. 🙂

RaulRogojan

NogDog ty

Sempervivum

Arrow functions are explained, e. g., here:
https://www.w3schools.com/js/js_es6.asp
and forEach here:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
openModal seems to be part of a library, it's not standard javascript.
Note that IE11 doens't support neither array functions nor forEach for a nodelist.

The code adds an event listener to each of the openModalButtons. When a button is clicked, a modal is opened.

RaulRogojan

Sempervivum
openModal is a const that select an html element in my code .
I know what arrow function are and i know what forEach does . I am confused about this part (button.dataset.modalTarget) That is what I dont understend . I have to mation that I had a data set to data-modal-target="#"

Sempervivum

const modal = document.querySelector(button.dataset.modalTarget)

I don't understand this either. In order to understand and explain one needs to view the context. If your site is public please post the URL.

RaulRogojan

Sempervivum
https://codepen.io/raul-rogojan/pen/dEOgee here is the code pen

Sempervivum

The button tag is this:

<button data-modal-target="#modal" class="main-btn">Open Modal</button>

dataset contains all data attributes of an element. In this case there is only one: "data-modal-target".
As the character minus is not permitted in a variable name there is a general rule: The character minus is omitted and the following character is switched to uppercase. This results in "modalTarget". As visible in the code above it's value is #modal which is the ID of the modal.

BTW: Quote from bootstrap's docu:

Nearly all Bootstrap plugins can be enabled and configured through HTML alone with data attributes (our preferred way of using JavaScript functionality).

AFAIK a modal in bootstrap can be configured without javascript.

RaulRogojan

Sempervivum Thanks , I know you can do thinks with bootstrap without java script . But I am trying to learn JavaScript .
Do you suggests to learn bootstrap for now and latter learn JavaScript ?

Sempervivum

IMO when using a library like Bootstrap it's recommendable to use the tools that are provided by that library. When you intend to learn Javascript I recommend to choose a diffent task. E. g.: Hand over parameters to the modal which, AFAIK, cannot be done without Javascript:
https://getbootstrap.com/docs/4.0/components/modal/
(Scroll to Varying modal content).