jquery - Replacing paragraph tag contents with a random word from javascript -

when user enters page div in center heading, quote underneath randomly picked list , button enter site. , cannot seem button fade in main site , fade out landing div. here jsfiddle try , explain things more.

jsfiddle

as able tell, i'm not great javascript or jquery , have done far learning bits , pieces , surfing web through code examples

i not see why not work had play around in jsfiddle simplified version of want , worked.

simplified version

below code simplified version (it wouldn't let me post without adding code?)

html

<div class="landingdiv">     <h1>landing div</h1>     <button id="showmain">enter site</button> </div>  <div class="main">     <h1>main site</h1> </div> 

jquery

$("#showmain").click(function () {     $(".main").fadein(1000);     $(".landingdiv").fadeout(1000); }); 

css

.main { display: none; opactiy: 0; } 

thanks in advanced.

steve.

the first jquery example threw error:

$ not defined  

meaning jquery not defined/included. wasn't. in second jsfiddle, included jquery.

you'll notice on left hand side of jsfiddle, you'll see under "framewords & extensions" heading can include framewordk - so, include jquery!

here updated fiddle jquery included: http://jsfiddle.net/6cghf/1/

as move forward in javascript development, idea check browsers developer tools errors when unexpected happening. helps you, , when ask questions on stackoverflow, providing these errors us! :)

the shortcut developer tools in chrome f12 - can see little red circle x in if have errors - click more info. developer tools available in other major browsers (except ie8 , below).

---

edit:

wrap click() event function in $(document).ready()

$(document).ready(function() {     $("#showmain").click(function () {         $(".main").fadein(1000);         $(".landingdiv").fadeout(1000);     }); }); 

what happening html file read top bottom. have reached click function before #showmain element had been read. so, jquery couldn't find it.

the reason wasn't problem in jsfiddle because javascript code wrapped in "onload" function (which is, admittedly, little different $(document).ready()) solved problem executing javascript after had been loaded. can see on left hand side in fiddle linked above, you'll find dropdown "onload" selected. in it, can choose "ondomready" (which equivalent $(document).ready())

in summary:

• don't use $(document).ready() in jsfiddle. don't need it.
• do use $(document).ready() around javascript relies on fact dom ready (ie. "all of content visible javascript").