Why isn't my html/js code working?

Question

I have a page with different panels, and a function that uses jQuery to show/hide them. I've debugged it for hours, but still can't figure out what's wrong.

JAVASCRIPT:

function toTab(curtab,tname){
console.log('toTab: '+curtab+', '+tname);
$('div.panel#'+curtab).attr('hidden','hidden');
$('div.panel#'+tname).removeAttr('hidden');
};

HTML:

<div class='panel' id='main'>
<div id='rafosd'><h1 id='rafos'>
    RafOS<em class='flashing'>_</em>
    </h1></div>
    <a id='mainl' class='panelchange' href='javascript:toTab("main","signin");'><!-- !!! JS FUNCTION CALLED HERE! !!! !-->Sign in</a>
    <script>
        setInterval(function() {
            $('.flashing').toggleClass('hide');
        }, 500);
    </script>
</div>
<!-- !-->
<div class='panel' hidden id='signin'>
<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
<form id='fsignin' style="margin-left:auto;margin-right:auto;" method='post' action='api/signin.php'>
<h1>Sign in</h1>
<h3 style="color: rgba(165, 165, 165, 1)">&mdash; Control your games remotely &mdash;</h3>
<input type='text' class='input' required placeholder='Username' autocomplete='off' name='username' id='signin-username'>
<br>
<input type='password' class='input' required placeholder='Password' name='password' autocomplete='off' id='signin-password'>
<br>
<input type='submit' class='button' name='submit' id='signin-submit' value='SIGN IN'><br>
Don&apos;t have an account? <strong><a id='signin' class='panelchange' href='javascript:toTab("signin","signup");'><!-- !!! JS FUNCTION CALLED HERE! !!! !-->Sign up</a></strong>
</form>
  </div>
</div>
</div>
<!-- !-->
<div class='panel' hidden id='signup'>
<div style="display:table;">
  <div style="display:table-cell;vertical-align:middle;">
<form id='fsignup' style="margin-left:auto;margin-right:auto;" method='post' action='api/signup.php'>
<h1>Sign up</h1>
<h3 style="color: rgba(165, 165, 165, 1)">&mdash; Control your games remotely &mdash;</h3>
<input type='text' class='input' placeholder='Username' autocomplete='off' name='username' id='signup-username'>
<br>
<input type='password' class='input' placeholder='Password' name='password' autocomplete='off' id='signup-password'>
<br>
<input type='submit' class='button' name='submit' id='signup-submit' value='SIGN UP'><br>
Already have an account? <strong><a id='signup' class='panelchange' href='javascript:toTab("signup","signin");'><!-- !!! JS FUNCTION CALLED HERE! !!! !-->Sign in</a></strong>
</form>
  </div>
</div>
</div>

NOTE:

If this is too much code and you can't understand it very well, or would like to see only a part/all of the code, the page is live here.

Comment if you don't understand something, and I'll do my best to explain.

EDIT:

Working fine now, thanks to Sean and slightlynybbled

What is not working? Also where is your javascript at in relation to the html? And what does your console.log print out? — Taplar, Nov 09 '15 at 18:49
What is `attr('hidden')` supposed to do? Should provide explanation of what you expect this code to do — charlietfl, Nov 09 '15 at 18:51
I think you want to try modifying the display attribute for the div panel instead of the hidden attribute. See here: http://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery — hughjidette, Nov 09 '15 at 18:54
It always seems to help me to place all javascript into '.js' files and use the 'document ready' functionality of jQuery. You can see the 'document ready' functionality http://www.w3schools.com/jquery/ — slightlynybbled, Nov 09 '15 at 18:54
@Taplar Just commented where the function is called, scroll right. Also fixed ID's — R__, Nov 09 '15 at 18:55
your '.signin' element is a nested child of the outer '#main'. Main has opacity of 0 and signin has opacity of 1. Also hidden is not being removed from the signin element — Taplar, Nov 09 '15 at 18:59
You have two functions called toTab, both of which are included, one in-line and one in main.js, one modifies opacity, the other tinkers with the hidden attribute, are you sure you don't want to combine those, they are likely conflicting. — hughjidette, Nov 09 '15 at 19:00
@slightlynybbled Putting it in a js file actually made it work somehow. Thanks! Do you mind putting that in an answer so I mark it as accepted, and other people aren't bothered to come here and after reading the whole thing it's already been answered? — R__, Nov 09 '15 at 19:04
@Sean Oh, that was probably it, just saw your comment, sorry... By editing main.js, I removed that old function... — R__, Nov 09 '15 at 19:05
@RafDev, so which do you consider your answer? mine or @slightlynybbled? :) — hughjidette, Nov 09 '15 at 19:15

score 2 · Accepted Answer · answered Nov 09 '15 at 20:17

You have two functions called toTab, both of which are included. One is in-line:

function toTab(curtab,tname){
console.log('toTab: '+curtab+', '+tname);
$('div.panel#'+curtab).attr('hidden','hidden');
$('div.panel#'+tname).removeAttr('hidden');
};

and one in main.js:

function toTab(curtab,tname){
$('div.panel#'+curtab).animate({
   opacity: 0,
})
$('div.panel#'+tname).animate({
   opacity: 1,
})
}

The latter modifies opacity, the former tinkers with the hidden attribute, are you sure you don't want to combine those, they are likely conflicting.

score 0 · Answer 2 · answered Nov 09 '15 at 19:00

Your selectors are incorrect. You need to have space between the class panel and id.

This

$('div.panel#'+curtab).attr('hidden','hidden');
$('div.panel#'+tname).removeAttr('hidden');

needs to be

$('div.panel #'+curtab).attr('hidden','hidden');
$('div.panel #'+tname).removeAttr('hidden');

Why isn't my html/js code working?

NOTE:

EDIT:

2 Answers2