Fiddle Showing JSFiddle Login in result panel when link is clicked (instead of running properly)

Question

I'm trying to create a page that will basically have 3 sections within it. At any given point, only 1 section should be displayed. Although relatively new to javascript/jquery, I figured this would be pretty straightforward with some links & a switch statement, but am running into a wall & can't figure out where I'm going wrong.

I've set up a fiddle at http://jsfiddle.net/donschaeferart/LVXKb/2/ that re-creates the basic functionality I'm trying to achieve. The code is as follows:

HTML:

<div class="divMain">
    <div id="divSub1">
        <h1>SubSection 1</h1>
        <p><a href="" onclick="selectSection(2);">Next</a></p>
    </div>
    <div id="divSub2" class="displayNone">
        <h1>SubSection 2</h1>
        <p><a href="" onclick="selectSection(1);">Previous</a></p>
        <p><a href="" onclick="selectSection(3);">Next</a></p>
    </div>
    <div id="divSub3" class="displayNone">
        <h1>SubSection 3</h1>
        <p><a href="" onclick="selectSection(2);">Previous</a></p>
    </div>
</div>

CSS:

.displayNone{display:none;}

Javascript:

function selectSection(n){  
switch (n){
    case 1:
        $("#divSub1").removeClass('displayNone');
        $("#divSub2").addClass('displayNone');
        $("#divSub3").addClass('displayNone');
    break;
    case 2:
        $("#divSub1").addClass('displayNone');
        $("#divSub2").removeClass('displayNone');
        $("#divSub3").addClass('displayNone');
    break;
    case 3:
        $("#divSub1").addClass('displayNone');
        $("#divSub2").addClass('displayNone');
        $("#divSub3").removeClass('displayNone');
    break;
    default:
        break;
}
}

However, while the code is valid & seems like it'd work fine, 2 things are happening...

When I run similar code on an actual page & click one of the links, it executes, then immediately reverts back after the function completes so that it looks as if the function never executed at all
When I run the fiddle & try to click a link, the result viewport switches to what appears to be a messed up version of the JSFiddle site itself (if you scroll right & click "login", it takes you to the JSFiddle login screen)

I'm pretty sure there's a minor mistake somewhere that's throwing everything off, but I'm at a loss, so any help would be appreciated.

for Next and Previous anchor tags use onclick instead of href — bitkot, Oct 16 '13 at 18:33
You should not be trying to execute a javascript function in your href. There are ways to do it with "javascript:" but, you are better off using a click handler. — sberry, Oct 16 '13 at 18:34
`http://fiddle.jshell.net/_display/selectSection(2);` doesn't exist, hence the 404 page. — Kevin B, Oct 16 '13 at 18:37
Apologies, I had originally used onclick, but somewhere along the line I guess I accidentally reverted to hrefs... In any case, I've updated the OP & the fiddle to use onclick events & the behavior is the same. — , Oct 16 '13 at 18:43
@Kevin Thank you, but I'm not sure how/why the code I've created is taking anyone to that page, hence the question — , Oct 16 '13 at 18:43
@DonSchaefer you've already figured that part out, it's happening because it's in the href rather than onclick. Now it isn't working because you aren't stopping the anchor tags from being followed. — Kevin B, Oct 16 '13 at 18:44
http://stackoverflow.com/questions/5468350/javascript-not-running-on-jsfiddle-net try this — bitkot, Oct 16 '13 at 18:46

score 0 · Accepted Answer · answered Oct 17 '13 at 13:21

@Kevin & Amit: Thank you for the assistance! After reviewing the suggestions, & the following from Amit's link...

b) ( ideal way ) - use unobtrusive Javascript to attach behaviour to DOM elements from within the JS solely, meaning separate HTML from JS.

I was able to stop the fiddle from doing the strange behavior I was initially having a problem with. Reworking the code also got me on track to getting the whole thing functioning properly on both JSFiddle AND the actual site I'm using it on. A final version of the code is available @ jsfiddle.net/donschaeferart/LVXKb/

Fiddle Showing JSFiddle Login in result panel when link is clicked (instead of running properly)

1 Answers1