why is my banner refusing to rotate? - javascript

It seems like I followed the directions completely in my assignment powerpoint, I checked if I was using each function right, tripple checked my spelling, and I have no idea why it wont work, I'm very new to javascript, I tried debugging it from top to bottom, however it seems something is making my script not work, or I am doing something wrong all together. What am I doing wrong with my code?
<html xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Rollover Banner </TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!-- VARIABLE DECLARATION -->
if (document.images)
{
var photos = new Array (“images1/nj1.jpg”,”images1/nj2.jpg”,”images1/dice1.jpg”);
var photoURLs = new Array (“msn.com”,”imdb.com”,”tv.com”);
}
var i = 0;
function newLocation()
{
document.location.href="http://www." + photoURLs[i];
}
function rotate()
{
i = Math.floor(Math.random()*3);
document.banner.src = photos[i];
document.write(i); //doesnt do anything
setTimeout("rotate()", 1000);
}
</SCRIPT>
</HEAD>
<BODY >
<a href="javascript:newLocation()"> <!--doesnt direct to anything -->
<img src="images1/nj2.jpg" name="banner"> <!--loads -->
</a>
<SCRIPT language="Javascript">
rotate();
</SCRIPT>
</BODY>
</HTML>

Make sure that you are not using smart quotes in your arrays. Try retyping the " character, even if it looks normal.
Smart quotes are a very annoying issue for developers alike.
Addition:
The find and replace feature is very helpful with this.

Related

Repel ifElse statement

I consider myself a novice on Javascript language, and i have a problem with my code. I am trying to simulate a simple if else statement, that relates to if your repel runs out, the program will ask you to use another one. However when i try to run it on Chrome, nothing is printed out on the screen.
Here is my code:
<html>
<head>
</head>
<body>
<script type = "javascript/text">
var repelsInBag = 10;
if (repelsInBag > 1){
document.write("Would you like to use another repel?");
}else{
document.write("Repel effect has ran out");
}
</script>
</body>
</html>
Thanks in advance !
Stephen
The problem is with your script tag:
<script type = "javascript/text">
Is incorrect and needs to be flipped around:
<script type = "text/javascript">
Or just remove it altogether, it's not needed.
<script>
You should create a page that will validate as HTML5 and remove the type attribute entirely.
http://validator.w3.org/
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script
If this (type) attribute is absent, the script is treated as JavaScript.

How To Make a Score Event Script for On-click game using purely HTML, css and Javascript

I need help on my game, in this chase I need help for On-click event. I have a image that for each time I click on it I get 1 score point. I need help to create this quite basic event or someone who be kind enough to write a script for me.
I created a basic code for the clicker game:
<html>
<head>
<title>My Work</title>
</head>
<body>
<img id="nokia" src="phone.jpg" />
</body>
</html>
I haven't made that much progress as you can see, I need help with a on-click event in either html or in JavaScript also a score board system would be a nice touch however I can probably figure this out.
I got a friend to write some code but time was limited I got a half done code if you like to finish it or to tell me what he was trying to do here is that code:
<html>
<head>
<title>My Work</title>
<script>
(function() {
var score = 0;
var phone = document.getElementById("nokia");
phone.onclick=function(){
score++;
output = document.getElementById("score");
output.innerHTML = score;
};
})();
</script>
</head>
<body>
<img id="nokia" src="phone.jpg" />
<div id="score"></div>
</body>
</html>
All help is greatly appreciated! :)
You would do something like this (plain js)
document.getElementById('nokia').onclick=function(){
var score = parseInt(document.getElementById("score").innerHTML);
score++;
document.getElementById("score").innerHTML = score;
}
Here a full example as fiddle: https://jsfiddle.net/sbunu38g/
Note: You will need to set the content of your score div to 0 at the beginning. Otherwise you will receive NaN after clicking the image
Update:
As asked in comments - to be able to use this in your header element you will need to wrap window.onload function around it. By this you will ensure the needed elements are loaded before trying to attack the onclick eventhandler
window.onload = function() {
document.getElementById('nokia').onclick=function(){
var score = parseInt(document.getElementById("score").innerHTML);
score++;
document.getElementById("score").innerHTML = score;
}
};

Function tag seems to not work?

I am trying to write a simple "Choose your own adventure" style game in Javascript format, mainly because its simple to write, but I have run into a problem. I am trying to get the javascript to run on page load, but it wont start. I am just left with a blank page.
Here is the code:
<!doctype html>
<body>
<title>Dungeons and Dwarves</title>
<script type="text/javascript>
function begin() {
alert("Welcome to Dungeons and Dwarves! A free 'Choose Your Own Adventure' game. In this adventure, you will be faced with many decisions, some of which could potentially lead to your death. If you are willing to put your life on the line, and leap forward into a new world and explore the unexplored, press OK to begin.")
var myAge = prompt("How old are you, adventurer?")
if (myAge < 18)
{
alert("Oh! They start younger and younger every year! You'll be careful out there, wont you?")
}
else
{
alert("I see you have had some experience with adventures! I wish you the best of luck, not that you will need it!")
}
}
</script>
<body onload='javascript:begin()'>
</body>
Im not sure what I have done wrong here, but I think the function tag isn't working properly. Just the way it looks in Notepad++, that might just be me. Could anyone give me assistance?
I apologise if I have formatted this wrong.
The browser thinks your JavaScript is not JavaScript (but some other, unknown kind of script):
<script type="text/javascript>
You omitted the second " from the type attribute.
As of HTML 5, the type attribute may be omited if you are using JavaScript, so just write:
<script>
Additionally, you have two <body> start tags. Only one of them has an onload attribute. Browsers may parse the first one and then ignore the second one.
These (among some other errors) would have been picked up by a validator.
You forgot " at:
<script type="text/javascript>
Make sure you put the " in front of >:
<script type="text/javascript">
And as Quentin notes, you have two body tags.
type="text/javascript" //add a " at the end
Correction
<script type="text/javascript">
Try this:
<html>
<head>
<title>Dungeons and Dwarves</title>
<script>
function begin()
{
alert("Welcome to Dungeons and Dwarves! A free 'Choose Your Own Adventure' game. In this adventure, you will be faced with many decisions, some of which could potentially lead to your death. If you are willing to put your life on the line, and leap forward into a new world and explore the unexplored, press OK to begin.")
var myAge = prompt("How old are you, adventurer?")
if (myAge < 18)
{
alert("Oh! They start younger and younger every year! You'll be careful out there, wont you?")
}
else
{
alert("I see you have had some experience with adventures! I wish you the best of luck, not that you will need it!")
}
}
</script>
</head>
<body onload='javascript:begin()'></body>
</html>
You are missing " at:
<script type="text/javascript>
You have misplaces the <body> tag at line number 2: remove body tag from there.
You need to include your <title> tag in <head> tag.
<script type="text/javascript>
would be
<script type="text/javascript">
and <body onload='javascript:begin()'></body>
would be
<body onload='javascript:begin();'></body>
all your alerts need to end like
var myAge = prompt("How old are you, adventurer?");

Generating and using URLs as jscript variables

I have now spent hours trying to figure out how you do this by reading other's posts - I even got a jsfiddle to work, but can't get this to work in my page.
I want to construct a URL to be used on a page multiple times, so that when I need to update the URL, I only need to do it in one place via a Javascript variable in the header.
I break the URL into two parts because one of the variables will nearly always be the same, but the other most often will be different on different pages.
For example, I declare in my header:
<script language="javascript" type=”text/javascript”>
function goSchedule()
{
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href= schedulePath;
}
</script>
And then I can't seem to figure out how to call it in the href. This doesn't work:
<p>Click the following link to test:Test this link</p>
If you answer, please explain how the initial Javascript is created and how to properly call it so it becomes an active URL.
It looks like you are trying to replace the href attribute at the moment the user clicks the link. I suggest you replace the href attribute once for all the link as soon as the page has finished loading.
Make sure you declare your function in the head section
<head>
<!-- Other head declarations ... -->
<script language="javascript" type=”text/javascript”>
function goSchedule() {
var schedulePath = "http://[rootPath]/";
var scheduleFileName = "[extension to document].htm";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
And then bind this method to the onload event of the body element like this
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
Here is the full html page:
<html>
<head>
<!-- Other head declarations ... -->
<script language="javascript" type="text/javascript">
function goSchedule() {
var schedulePath = "http://support.mozilla.org/";
var scheduleFileName = "en-US/products/firefox?as=u&utm_source=inproduct";
schedulePath = schedulePath + scheduleFileName;
document.getElementById('go').href = schedulePath;
}
</script>
</head>
<body onload="goSchedule()">
<!-- Other HTML Stuff Goes Here ... -->
<p>Click the following link to test:Test this link
</p>
</body>
</html>

Why isn't the following javascript code working? (Crafty.js used)

I am a newbie, in crafty as well as js, so pardon me if I might have made very silly errors in the following program.
What is wrong with the following code? The following code is supposed to create 5*5 matrix where each block would be a 60 pixel high and wide iceblock as stored in iceblock.jpg.
window.onload=function()
{
Crafty.init(500,500);
Crafty.canvas();
Crafty.sprite(60,"iceblock.jpg",{block : [0,0]});
Crafty.c("iceblock",function(){
init: function(){
this.addComponent("2D, Canvas, Mouse, block");
this.w = 60;
this.h = 60;
}
});
};
for(var i=0;i<5;i++)
{
for(var j=0;j<5;j++)
{
Crafty.e("iceblock").attr({x: i*60,y: j*60})
}
}
The corresponding HTML code is:-
<!DOCTYPE html>
<head>
<script type="text/javascript" src="crafty.js"></script>
<script type="text/javascript" src="assignment.js"></script>
<title>My Crafty Game</title>
</head>
<body>
</body>
</html>
When I open the HTML page, the complete output page is blank.
This is the link to the image.
http://postimage.org/image/ivqfhmjt9/
PS:- Is there a less annoying way to indent our code instead of putting 4 spaces infront of each line? Very time consuming and tedious.
For reference, see this thread https://groups.google.com/forum/?fromgroups#!topic/craftyjs/OkG5rFb3tqo
Or the code here http://jsfiddle.net/cYxeZ/

Categories