I am working on a small project, trying to build a simple snake game.
However, my javascript will not run. I have passed a lot of code in the file, but somehow it only runs the index.html file. I have looked at the debugger in Mozilla and it finds the javascript.
Here is my index.html:
<html>
<head>
<title>Welcome to CSnake50</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<section id="playHUD">
<h2 id="scoreboard"> Length </h2>
</section>
<section id="gameOver">
<h1 class="title">GAME OVER!</h1>
<h3 id="restartButton">Restart?</h3>
</section>
<canvas id="game-screen"></canvas>
<script src="snake.js"></script>
</body>
</html>
Image when running Index.html
Related
When I'm running the HTML on android, chrome is not loading the external CSS and js files, all the files are in the same folder. Repo
Beginner here.
Html
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Palindrome Checker</title>
<link rel="stylesheet" href="/pali.css">
<!-- Before <link rel="stylesheet" href="pali.css">
also tried <link rel="stylesheet" href="./pali.css"> -->
</head>
<body>
<h1>Palindrome Checker</h1>
<div class="main">
<div class="holder">
<div class="bgimg">
<span>Type in here-</span>
<input type="text" name="textin" label ="textin" id="Udt1" placeholder="Eg-Racecar">
<button class="btn" onclick="tex()">Check</button>
</div>
</div>
<span class="anshold"><p id="udans"> </p>
</span>
</div>
</body>
<script src="/palindrome.js"></script>
</html>
use ./ to your css link, not /,
ex:
./pali.css
If the files are in the same folder like you said, the slash isn't necessary - simply <link rel="stylesheet" href="pali.css"> and <script src="palindrome.js"></script>. If that doesn't work, I would also advise looking for spelling errors in the filenames.
I just uploaded my website on a free host server but it doesn't work properly. I don't know why...
can you help me please ?
see the link :
https://electrophotonique.000webhostapp.com/
Your code is fine but you just need to put your scripts at the end of your code before the </body> tag Like this :
<html>
<head>
<link rel="stylesheet" href="CSS/style2.css">
<link rel="shortcut icon" href="IMAGES/PNG/favicon.png">
<meta charset="utf-8">
<title>Electrophotonique Ingenierie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- YOUR CODE - START -->
.....
<!-- YOUR CODE - END -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src="js/button.js"></script>
<script src="js/index.js"></script>
</body>
</html>
So I'm not sure if it's just because I'm a noob at this or what, but I can't get the bootstrap CDN to work. I copied the CDN from their website and pasted it into the code I was working on, and then a fresh page, as shown below and it's not applying on either. The weird thing is that the CDN from freecodecamp on their bootstrap portion works. What am I doing wrong?
Heres the code
<!doctype HTML>
<html>
<head>
<title>Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</head>
<body>
<div class="navbar navbar-default">
</div>
</body>
</html>
You need to import jQuery as well (bootstrap uses it) and its best to load it just before your closing tag so that it doesn't block other loading and is then called with a $(document).ready() wrapper.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>This is some text.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>
</html>
I'm not really sure why this is not working but I have an MVC View that I want to display the current date/time/seconds on the page. I've put the javascript in the "Scripts/script.js" file. I then added the following at the bottom of the MVC View.
#section scripts {
<script src="~/Scripts/script.js"></script>
<script type="text/javascript">
$(document).ready(function () {
setDateTimer();
});
</script>
}
Thing is when I run it something is causing an error. Unfortunately at the moment I can't see the actual error message because of the way they have the site configured any error just takes you to a generic error page. I do know it has something to do with the code above because removing it cause the page to work.
For testing purposes I even removed all but simple javascript code in the file but that still doesn't work. Right now this is all that is in my script.js file.
function setDateTimer() {
var today = new Date();
}
I know the name of the of the .js file in the code is correct because I just dragged and dropped it to the page from the solution explorer.
Here is most of my _Layout page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>
Layout page doesn't have a place to render the section you can change it like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body>
<div class="container body-content">
#RenderBody()
<footer></footer>
</div>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
#RenderSection("scripts",true)
</body>
</html>
I've just created this theme with the jquery mobile theme rooler, and included it in my page like this:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="themename.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div class="container" data-role="page" data-theme="a">
<div class="title" data-role="header">Title</div>
<div class="box" data-role="content">
Content
</div> <div class="footer" data-role="footer">
Some other content
</div>
</div>
</body>
</html>
But the default theme is displayed:
The chrome console isn't reporting any errors.
What could be the problem?
Move your theme which I'm presuming is themename.min.css below jquery.mobile-1.4.5.min.css. The way themes work in CSS is usually by overriding selectors, such as class names. If two stylesheets apply styles to the same selector, the last defined instance is the one that's used. Currently, you're defining your theme and overriding it with the main jQuery theme. Reverse the order and your problem should be fixed. Below would be an optimal loading scenario.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="themename.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
For CSS:
Load the default jQuery Mobile Theme
Load the jQuery Mobile Icon overrides
Load your custom theme `thememain.min.css`
In addition, it's wise to move the JavaScript below the CSS files. CSS Files are downloaded in parallel whereas JavaScript files are usually downloaded and parsed one at a time.