Solved

HTML5 and Javascript

Posted on 2016-10-17
3
63 Views
Last Modified: 2016-10-18
I'm trying to run javascript on my HTML page and it seems not to be working at all.  

I've uploaded the project.  I'm going by pluralsight and going along with a course there.  I added the jquery which was not included in the pluralsight but the canvas is not working.

If you remove the .txt extension you will get the zip file.
Proj2.zip.txt
0
Comment
Question by:CipherIS
3 Comments
 
LVL 9

Accepted Solution

by:
Brian Tao earned 250 total points
ID: 41847718
2 problems:
  1. You have a typo in Script.js.  You had addEventListender (an extra "d") where it should be addEventListener.
  2. jcanvas needs jquery, so you have to include a line for it in the <head> section of your canvas.html, e.g.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Open in new window

0
 
LVL 82

Assisted Solution

by:leakim971
leakim971 earned 250 total points
ID: 41847731
in you file script.js replace :
addEventListender("load", initiate)
by :
addEventListener("load", initiate);

also you posted the version without the jQuery plugin you said you added line 7 :

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf=8" />
        <link rel="stylesheet" href="mystyle.css" />
        <script src="js/jquery.min.js"></script>
        <script src="js/jcanvas.min.js"></script>
        <script src="js/script.js"></script>
        <title>Canvas Demo HTML5</title>
    </head>
    <body>
        <div>
            <p>Canvas</p>
        </div>
        <section id="CanvasSection">
            <canvas id="canvas" width="500" height="300"></canvas>
        </section>
    </body>
</html>

Open in new window


https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
0
 
LVL 1

Author Closing Comment

by:CipherIS
ID: 41848250
Thanks.  Can't believe I didn't see the typo.
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

685 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question