Jump to content
brooke_theperson

Script won't work properly

Recommended Posts

Hey, so I have a favor to ask. See, I learned to code on codecademy and I use the website to make my 'codebits'. Here, my code is working perfectly, but if I write the code in notepad and save it as an html, none of the jquery or javascript activates. I was wondering if someone could check out my code and figure out why. I don't think you have to go through the whole code. Just look at the script tags and the skeleton of the code, see if you can figure out why it won't work properly when saved as an html file. It would be a HUGE help! Thanks!

<!DOCTYPE html><html><head>    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>    <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script></head><style></style><script></script><body>    <div class = "insideborder">        <div class = "header">            <div id = "home">Go Home</div>            <h3 class = "title">Civil War</h3>        </div>        <div class = "sidebar">            <button id = "before">Before</button>            <button id = "during">During</button>            <button id = "after">After</button>            <button id = "leaders">Leaders</button>            <button id = "battles">Battles</button>            <button id = "soldiers">Soldiers</button>            <button id = "women">Women</button>            <button id = "medicine">Medicine</button>            <button class = "game">Play Game</button>                    </div>        <div class = "body"></div>        <div class = "footer"></div>    </div></body></html>

Based on this, is there any reason why the script would not work when saved as an html file?

Edited by brooke_theperson

Share this post


Link to post
Share on other sites

I'd use a text editor specifically designed for writing code like HTML, CSS, JavaScript etc instead of plain notepad. There are plenty of good free ones out there. Using a text editor is helpful in properly setting up and saving your files to the right extension for example in order to run properly.

 

Other than that, I see you have spaces before and after your equal signs. Not entirely sure this matters. Try having them like this instead: id="leaders"

Share this post


Link to post
Share on other sites

I use ordinary Notepad all the time for tiny html files and there is no reason it should affect your code.

 

As Don mentions it is unusual to add spaces around equals signs IN HTML CODE, while it is ordinary to do so in Javascript code.

 

Now obviously you need to make sure in your windows folder options that you are not hiding known extensions.

 

I had doubts about...

src="//ajax.googleapis....

...but this is correct as discussed below...

Share this post


Link to post
Share on other sites

'//ajax.googleapis' allows for http: and https: preventing in the latter a insecure web link error message.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Oops. I just noticed that your html structure is incorrect. Remember you want to keep everything inside the head or inside the body...

<!DOCTYPE html><html><head></head><body></body></html>

..or in more detail...

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>tab</title><link rel="stylesheet" type="text/css" href="externalstyle.css"/><style>/* comment: local styles go here */</style><script type="text/javascript" src="externaljavascript.js"></script><script>/* comment: local scripts go here */</script></head><body><!-- comment: html content goes here --></body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...