How does a script work on a web page?

Question

How does a script work on a web page?

Asked 4 years, 3 months ago

Viewed 48 times

0

I created a page with three divs that direct to videos according to their title, when clicking on each of them, a modal is opened with the respective video of div.

This is the HTML:

<body>
        <section class="cards">
            <div class="card" id='LyBYdYnaX0c'>
                <p class="title">Game</p>
            </div>
            <div class="card" id='5qap5aO4i9A'>
                <p class="title">Lofi</p>
            </div>
            <div class="card" id='_hJZEq61KeM'>
                <p class="title">Camus</p>
            </div>
        </section>
        <div class="modalOverlay">
            <div class="modalOverlayContent">
                <div class="modalIframe">
                    <iframe src='' frameborder="0"></iframe>
                </div>
                <div class="modalOverlayClose">
                    <a>
                        <i class="material-icons">close</i>
                    </a>
                </div>
            </div>
        </div>
        <script src="script.js"></script>
    </body>

The links are dynamic, as the videos are embedded from Youtube, I put the video id as the id of each card, so the control of the links is done directly by Javascript.

const cards = document.querySelectorAll('.card')
const modalOverlay = document.querySelector('.modalOverlay')

for(let card of cards){
    const videoId = card.getAttribute('id')
    card.addEventListener('click', function(){
        modalOverlay.classList.add('active')
        modalOverlay.querySelector('iframe').src = `https://www.youtube.com/embed/${videoId}`
    })
}

modalOverlay.querySelector('.modalOverlayClose').addEventListener('click', function(){
    modalOverlay.classList.remove('active')
    modalOverlay.querySelector('iframe').src = ""
})

The structure for that was used in Javasscript is running full-time in the browser? Or is it only executed when called? If so, the addEventListener would be who "calls" the structure for? Even though you’re inside it?

Follows print of the page to make it clearer:

1 answer

Browser other questions tagged javascript html callback event-listener

You are not signed in. Login or sign up in order to post.

by Maniero • **444,682** points · Answer 1 · 2020-07-27T19:43:35+00:00

You are using a function that works with a mechanism called callback. Then you record the code you want to run in a function, in case the addEventListener(). Inside there is a code that will know what to do and when to call your code. It’s his problem how this part works. Your task is just to tell what code he should run.

You used a anonymous function to inform this code. But it is the internal mechanism of browser who will call this code when he thinks it is pertinent (he has rules for it that make everything work as expected).

So your code is only recording what should be executed, this whole code will not be called, this for it will not run several times, it will run only once (it can perform several steps because it has several cards, but only).

This is all controlled by the browser’s event mechanism, as the function name already gives a hint. Then you add cum code to an event that listens to what is happening and take an action (which your two-line code tells you to do in each one you added). The events used were the clicks which may be given in one of the 3 cards which are added and click of closing.

Does this work as you expect? In the form placed I find it a little strange.

There are different ways to do this, I suggest studying the mechanisms individually in some structured material that shows all the details.