How to apply same functionality to two buttons?

Question

There is JavaScript code in my website project. It work for one button but it should to do same thing for second one also. It should do same functionality with two buttons. How can do it? This is my website and I want right button work

After first button worked

Here's first button html code...

<div class="tablo_area-left">
    <h2>RULO AÇMA BOY KESME MAKİNELERİ</h2>
    <p>
        1,50 mm'den 25.00 mm'ye kadar her tür kalite sıcak ve dekape(RP) grubu malzemeler istenilen her boyda kesilerek servise sunulmaktadır. 0,50 mm'den 3,00 mm'ye kadar tüm soğuk ve galvaniz grubu malzemeler özenle istenilen boyda kesilmekte ve itina ile paketleme yapılmaktadır.
    </p>
    <div class="morph-button morph-button-overlay morph-button-fixed">
        <button type="button">Daha Fazla Bilgi</button>
        <div class="morph-content">
            <div class="content-style-overlay">
                <span class="icon icon-close">X</span>
                   </div>
            <!-- overlay content end -->
        </div>
        <!-- morph content end -->
    </div>
    <!-- morph-button -->
</div>
<!-- table_area-left end -->

Here's the second button html code...

 <div class="tablo_area-right">
    <h2>RULO AÇMA BOY KESME MAKİNELERİ</h2>
    <p>
        1,50 mm'den 25.00 mm'ye kadar her tür kalite sıcak ve dekape(RP) grubu malzemeler istenilen her boyda kesilerek servise sunulmaktadır. 0,50 mm'den 3,00 mm'ye kadar tüm soğuk ve galvaniz grubu malzemeler özenle istenilen boyda kesilmekte ve itina ile paketleme yapılmaktadır.
    </p>
    <div class="morph-button morph-button-overlay2 morph-button-fixed">
        <button type="button">Daha Fazla Bilgi</button>
        <div class="morph-content">
            <div class="content-style-overlay2">
                <span class="icon icon-close">close</span>
                <div id="table_right">
                    <p>Show in page....</p>
                </div>

            </div>
            <!-- overlay content end -->
        </div>
        <!-- morph content end -->
    </div>
    <!-- morph-button -->

</div>
<!-- Table area right end-->

And the JavaScript code...

(function () {
    var docElem = window.document.documentElement, didScroll, scrollPosition;

    // trick to prevent scrolling when opening/closing button
    function noScrollFn() {
        window.scrollTo(scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0);
    }

    function noScroll() {
        window.removeEventListener('scroll', scrollHandler);
        window.addEventListener('scroll', noScrollFn);
    }

    function scrollFn() {
        window.addEventListener('scroll', scrollHandler);
    }

    function canScroll() {
        window.removeEventListener('scroll', noScrollFn);
        scrollFn();
    }

    function scrollHandler() {
        if (!didScroll) {
            didScroll = true;
            setTimeout(function () { scrollPage(); }, 60);
        }
    };

    function scrollPage() {
        scrollPosition = { x: window.pageXOffset || docElem.scrollLeft, y: window.pageYOffset || docElem.scrollTop };
        didScroll = false;
    };

    scrollFn();

    var el = document.querySelector('.morph-button');

    new UIMorphingButton(el, {
        closeEl: '.icon-close',
        onBeforeOpen: function () {
            // don't allow to scroll
            noScroll();
        },
        onAfterOpen: function () {
            // can scroll again
            canScroll();
            // add class "noscroll" to body
            classie.addClass(document.body, 'noscroll');
            // add scroll class to main el
            classie.addClass(el, 'scroll');
        },
        onBeforeClose: function () {
            // remove class "noscroll" to body
            classie.removeClass(document.body, 'noscroll');
            // remove scroll class from main el
            classie.removeClass(el, 'scroll');
            // don't allow to scroll
            noScroll();
        },
        onAfterClose: function () {
            // can scroll again
            canScroll();
        }
    });
})();

score 0 · Answer 1 · answered Apr 06 '16 at 16:42

0

I would just name the JavaScript function:

function buttonClick() { //do button actions }

and then call it from within the onClick property of both buttons:

<button type="button" onClick="buttonClick();">Daha Fazla Bilgi</button>

answered Apr 06 '16 at 16:42

nhouser9

6,730
3
21
42

1

While this is valid approach, I would guess from the question that the OP is trying to separate the HTML layer from the javascript event and behavior handling as much as is possible. This would be a step in the other direction. – Mike Brant Apr 06 '16 at 17:25

score 0 · Answer 2 · answered Apr 08 '19 at 15:17

querySelector will match the first element that matches the selector.

If you want to match multiple elements, use querySelectorAll which will return a NodeList (which is like an array) containing all the matching elements. You can then loop over it and apply your code to each element in turn.

How to apply same functionality to two buttons?

2 Answers2