1

I have a test homework for my interview. I need to find broken widget that contains a code that conflicts with the work of the site (http://elfsight-test.dsotnikov.ru/). I need to tell which line breaks code. HTML elements which might be the widget will contains eapps or elfsight in their class name.

I think I found the widget, but I can't tell what's wrong with the code. The widget is located at the right-bottom corner (it is an email button). When I try to submit a form, nothing happens.

This is the code, that related to that exact widget.


script.js

window.onload = function() {
    const interval = setInterval(() => {
        const button = document.querySelector('.eapps-form-button');
        if (button) {
            clearInterval(interval);
            button.addEventListener('click', function (event) {
                event.stopPropagation();
            }, true);
        }
    }, 100);
}


Script2.js

$(document).ready(function () {

    // toggle mobile menu
    $('[data-toggle="toggle-nav"]').on('click', function () {
        $(this).closest('nav').find($(this).attr('data-target')).toggleClass('hidden');
        return false;
    });

    // feather icons
    feather.replace();

    // smooth scroll
    var scroll = new SmoothScroll('a[href*="#"]');

    // tiny slider
    $('#slider-1').slick({
        infinite: true,
        prevArrow: $('.prev'),
        nextArrow: $('.next'),
    });

    $('#slider-2').slick({
        dots: true,
        arrows: false,
        infinite: true,
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000,
        centerMode: true,
        customPaging: function (slider, i) {
            return '<div class="bg-white br-round w-1 h-1 opacity-50 mt-5" id=' + i + '> </div>'
        },
        responsive: [{
            breakpoint: 768,
            settings: {
                slidesToShow: 1
            }
        }, ]
    });
});

When I open code inspector, it stops at line 7 event.stopPropagation();. I am also suspicious about the query selector, because there are 3 buttons with that class name.

ivanisovich
  • 11
  • 2
  • 1
    This code looks like an inefficient alternative to [`MutationObserver`s](//developer.mozilla.org/docs/Web/API/MutationObserver). – Sebastian Simon Sep 12 '21 at 17:12
  • See [What is event bubbling and capturing?](/q/4616694/4642212) and [What's the difference between event.stopPropagation and event.preventDefault?](/q/5963669/4642212), and of course the documentation: [`stopPropagation`](//developer.mozilla.org/docs/Web/API/Event/stopPropagation), [Event bubbling and capture](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#event_bubbling_and_capture). – Sebastian Simon Sep 12 '21 at 17:14
  • Does this means that stopPropagation is not blocking anything and is used to prevent propagation ? – ivanisovich Sep 12 '21 at 17:18

0 Answers0