I would need two functions to be executed onclick

Question

The two functions when a user clicks the next button will call the next() and fbsharing() function. next swaps between 4 divs that will display only one at a time (WORKING) fbsharing (will display a customised share button in a div id=fbshare (FAIL)

here is my jsfiddle : http://jsfiddle.net/U3jdm/

<div id="content" style="width:60%;  float:left; padding: 10px 10px 10px 10px;">
    <div id="ncholder">
        <div id="ncframe"></div>
        <div class="PortSwap" id="swap0"> 
        111111111111
        </div>

        <div class="PortSwap" id="swap1"> 
         2222222222
        </div>

        <div class="PortSwap" id="swap2">
         333333333
        </div>

        <div class="PortSwap" id="swap3"> 
        4444444444
        </div>
    </div>
    <div id="ncnav" style="width:83%; float:left; padding: 30px 10px 10px 10px;">
    <div style="width:30%; float:right; color:#66ce9d; font-size:18px; font-weight:bold;">
        <div style="width:30px; height:30px; float:left;"><img src="leftnav.png" alt="Previous" onClick="(function(){prev(); fbSharing();})();"/></div>
        <div style="width:30px; height:30px; float:right;"><img src="rightnav.png" alt="Next" onClick="(function(){next(); fbSharing();})();"/></div>
    </div></div>
     <div id="fbshare" style="color:#ed1a64; font-size:18px; font-weight:bold;"> </div>
</div>
<script>
 $(function () {
     "use strict";
     $('.PortSwap').hide().eq(0).addClass('active').show();
 });

 function prev() {
     var current = $('.PortSwap.active'),
         prev = current.prev('.PortSwap');
     console.log(prev.length, prev);
     if (prev.length) {
         current.hide().removeClass('active');
         prev.addClass('active').show();
     }
 }

 function next() {
     var current = $('.PortSwap.active'),
         next = current.next('.PortSwap');
     if (next.length) {
         current.hide().removeClass('active');
         next.addClass('active').show();
     }
 }
function fbSharing() {
var test = document.getElementByClassName("PortSwap active");
var share;
var testid = test.id;
    if (testid = 'swap0') {
        share ="1111111";
    }
    else if (test.ID = 'swap1') {
        share ="2222";
    }
    else if (test.ID = "swap2") {
        share ="33333";
    }
    else if (test.ID = "swap3") {
        share ="44444";
    }
    document.getElementById("fbshare").innerHTML=share;
}
</script>

Hi, Thanks for spotting my mistake on the getelementsclassname. For a working demo of the two functions being executed onclick, here it is: http://jsfiddle.net/79B8z/1/

Answer 1

I found 2 errors.

1. There is no function named getElementByClassName its getElementsByClassName (with an s) 2. document.getElementsByClassName returns a collection of HTMLElement you need the first one so you might have to use an array index notation.

Finally,

It should look like,

var test = document.getElementsByClassName("PortSwap active")[0]

JS Fiddle

Answer 2

To start two functions onclick just use

onclick="next(), fbsharing()"

I think thats what you mean..