Calling 2 different divs using onclick() in javaScript

Question

I would like to know how to call two different divs using a single Onclick() function in JavaScript.

I have two divs and a button (Right now I have 2 buttons each for a single div). whenever these buttons are pressed then the 2 divs need to execute. I just don't know how to call two divs at a time.

Here is the sample code.

<div id="scroll" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" value="Scroll" onclick="zxcTextScroller.Scroll('scroll');" />
<div id="scroll2" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" value="Scroll" onclick="zxcTextScroller.Scroll('scroll2');" />

How to control these two divs by using a single Onclick Event? Am using two Onclick Events but I need to have only single onclick which calls both the div's.

Thanks

Do you mean you want to trigger zxcTextScroller.Scroll('scroll'); and zxcTextScroller.Scroll('scroll2'); together when you click on something? Why not put these two sentences into one onclick function? — JasmineOT
– JasmineOT, Commented Sep 22, 2015 at 8:37
You can trigger Scroll for scroll and scroll2, but let's make this somehow generic. Please post the .Scroll function so we can help you. Basically you can place a class for each div like <div id="scroll" class="js-clickable-scroll" style="position:relative; width:100px; height:40px;"></div> and <div id="scroll2" class="js-clickable-scroll" style="position:relative; width:100px; height:40px;"></div> and then trigger the scroll for elements with js-clickable-scroll class. — Razvan Dumitru
– Razvan Dumitru, Commented Sep 22, 2015 at 8:39
And after that you can create another div with this class js-clickable-scroll and it will work for the 3rd too as you trigger for all elements with that class. — Razvan Dumitru
– Razvan Dumitru, Commented Sep 22, 2015 at 8:41

Shilly · Accepted Answer · 2015-09-22 08:37:10Z

2

Make a single function that handles both divs at the same time and have each button refer to this function? Something like:

var handler = function( event ) {
    zxcTextScroller.Scroll(event.target.name);
};

<input type="button" name="scroll" value="Scroll" onclick="handler" />
<input type="button" name="scroll2" value="Scroll" onclick="handler" />

OR if you want the function to always scroll both divs:

var handler = function() {
    zxcTextScroller.Scroll('scroll');
    zxcTextScroller.Scroll('scroll2');
};

answered Sep 22, 2015 at 8:37

Shilly

8,5991 gold badge21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

laruiss · Accepted Answer · 2015-09-22 08:49:32Z

0

Just call the function twice in the onclick attribute, once for the 'scroll' and once for 'scroll2':

<div id="scroll" style="position:relative; width:100px; height:40px;"></div>
<div id="scroll2" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" value="Scroll" onclick="zxcTextScroller.Scroll('scroll'); zxcTextScroller.Scroll('scroll2');">

But you should not use onclick attribute and use addEventListener instead like this:

<div id="scroll" style="position:relative; width:100px; height:40px;"></div>
<div id="scroll2" style="position:relative; width:100px; height:40px;"></div>
<input type="button" name="" id="scrollerBtn" value="Scroll" />
<script>
    window.addEventListener('load', function (e) {
        var scrollerBtn = document.getElementById('scrollerBtn');
        scrollerBtn.addEventListener('click', function (e) {
             zxcTextScroller.Scroll('scroll');
             zxcTextScroller.Scroll('scroll2');
        });
    });
</script>

edited Sep 22, 2015 at 8:49

answered Sep 22, 2015 at 8:37

laruiss

3,8261 gold badge21 silver badges29 bronze badges

1 Comment

Novice Over a year ago

Worked like a champ!! Thanks

Collectives™ on Stack Overflow

Calling 2 different divs using onclick() in javaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related