...

View Full Version : Getting Golf Sign program to work.



worldtraveller
12-07-2010, 02:52 PM
I almost got part of this one program to work. It is of a golf sign with a golf ball moving across and landing in the word Golf into the "o"
When the ball lands in the o the sign of "your online source of golf equipment" appears after ball has landed and grows in size.

right now the ball is what I have but I can not get my sign to appear.

I use 2 external files

I will post all the coding here

here is my main file I worked on

this is my golfpage.htm file


<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Case Problem 1

The Golf Page
Author:
Date: 05 December 2010

Filename: golfpage.htm
Supporting files: ball.gif, clouds.jpg, golf.js, golfer.gif, styles.css
-->
<title>The Golf Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="golf.js" type="text/javascript"></script>

<script type="text/javascript">

var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);

var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);

var index=0;
var lastindex=x.length-1;
// var fs=getFontSize("slogan");
function moveBall() {

if (index <= lastindex) {
placeIt("Ball", x[index], y[index]);
index++;
setTimeout("moveBall()", 5);
} else {
setFontSize("slogan", 25);
}
}

</script>

</head>
<body onload="moveBall()">
<div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
<div id="Title">
THE G<div style="display: inline; position: relative; background-color: black;"
><img id="Ball" src="ball.gif" alt="O"
/></div>LF PAGE
</div>
<div id="box"
style="">
<span id="slogan">
Your Online Source of Golf Equipment
</span>
</div>
</body>
</html>


Here is one external file where I made some functions this is the golf.js file

New Perspectives on JavaScript
Tutorial 4
Case Problem 1

The Golf Page
Name:
Date: 05 december 2010

Function List:
placeIt(id, x, y)
Places the id object at the coordinates (x, y)

showIt(id)
Shows the id object by setting the object visibility to "visible"

getFontSize(id)
Retrieves the font size of the id object

setFontSize(id, fs)
Sets the font size of the id object to fs

changeFontSize(id, dfs)
Changes the font size of the id object by dfs
*/



function showIt(id) {
object=document.getElementById(id);
object.style.visibility="visible";
}

function placeIt(id, x, y) {
// Places the id object at the coordinates (x,y)
object = document.getElementById(id);
object.style.left = x + "px";
object.style.top = y + "px";
}

function getFontSize(id) {
// Returns the font size of the object with the value id
object = document.getElementById(id);
size = parseInt(object.style.fontSize);
return (size);
}
function setFontSize(id, ptsize) {
// Sets the font size of the object with the value id
object = document.getElementById(id);
object.style.fontSize = ptsize + "pt";
}
function changeFontSize(id, dfs) {
// Returns the font size of the object with the value id
fs = getFontSize(id);
setFontSize(id, fs + dfs);
}


Here is the styles.css page


/*
New Perspectives on JavaScript
Tutorial 4
Case Problem 1
Filename: styles.css

This file contains styles used in the golfpage.htm file
*/

body {font-family:Arial, Helvetica, sans-serif; font-size: 18pt;
color:blue; background-image: url(clouds.jpg)}

#Title {position: absolute; left:395px; top:260px}

#Ball {position:relative; top:0px; left:0px}

#Ball img {border-width: 0px}

#box {width:600px; height: 250px;
border-style:solid; border-width:1 4 4 1; border-color:blue;
background-color:rgb(0,255,0); text-align: center}

#slogan {visibility: hidden; position: relative; top: 50px;
color:black; font-family: Times New Roman, Times, serif;
font-style:italic; font-weight:bold}



What i am not able to get work i think is to call the changeFontSize() function to increase the size of the "sign"

also an if statement to test value of fs variable is less then equal to 20

how do i get my sign to appear on the output?
thanks

Old Pedant
12-07-2010, 07:04 PM
} else {
showit("slogan");
setFontSize("slogan", 25);
}

worldtraveller
12-07-2010, 08:11 PM
I made function at the end

in the golf.htm file after the moveBall function ()



function growText() {
getFontSize("slogan", 25);
if (fs <= 20) {
} else {
changeFontSize("slogan"+1);
getFontSize("slogan", 20);
}
}

but it is still not working, what seems to be situation

i am to make a growText function

so to grow text from 0 to 21 points.
need to call cgetfontSize function as parameter to store value in variable named "fs"

create an if statement that tests value of fs variable is less then or equal to 20
if condition is met call change FontSize() function to increase size of slogan objact by 1
rerun growText function after delay of 20 milliseconds.

so if that is what is need what did i do wrong?

Old Pedant
12-07-2010, 08:16 PM
*SIGH* I think you need to go back to chapter 1 and start again.

Look here:


function getFontSize(id) {
// Returns the font size of the object with the value id
object = document.getElementById(id);
size = parseInt(object.style.fontSize);
return (size);
}

Now, look how you are calling that function:


getFontSize("slogan", 25);
...
getFontSize("slogan", 20);


You honestly don't see anything wrong with your code? Really???

worldtraveller
12-07-2010, 08:27 PM
my mistake on it

this is how the function should be


function growText() {
getFontSize("slogan", 25);
if (fs <= 20) {
} else {
changeFontSize("slogan"+1);
getgrowText("slogan", 20);
}
}


I am to rerun the growText() function when page is loaded

worldtraveller
12-07-2010, 08:49 PM
I agree All it is similar or same project. However In our project I am supposed to get it to work using external files.

When I used external files i was able to just get the ball move across the screen but not able to get the text in there.

I have my own post up and once again same problem. I am not sure y the slogan would not work but only golf ball.
suggestions?

worldtraveller
12-07-2010, 09:01 PM
How could my code be wrong when the program works with just the ball going when i get rid of the growtext function?

Old Pedant
12-07-2010, 09:06 PM
this is how the function should be
No. Not even close. You changed *NOTHING* that matters in the least.

You are just THROWING code at the problem and hoping that you ACCIDENTALLY get the right answer.

GO READ MORE. Read up on how functions work. Read up on arguments to functions and return values from functions.

And WHY would you EVER think that using

getgrowText("slogan", 20);
would do *ANYTHING* when you don't even *HAVE* a function by that name.

Sure, we could write this code for you. But you wouldn't learn anything at all that way. Until and unless you understand the PRINCIPLES of programming, there's no point in proceeding further.

I guess I'll try to spell it out for you, though you REALLLY need to go read read read your tutorial materials over and over until this sinks in:

(1) When you DECLARE a function, you can optionally declare what arguments it will take.
For example:


function getFontSize(id) {

That declares a function named getFondSize and says that the function expects *ONE* argument. It happens that the name of the argument gives you a clue to what kind of value is expected, but that's just a naming convenience. If the function had been declared as


function getFontSize(abcdefghijklmnopqrstuvwxyz_1234567890) {

that would *NOT* change how your code needs to *CALL* it.

(2) A function may *OPTIONALLY* return one value. The only way to find out if a function does return a value is to look at the code in the function: Does it include a line such as

return x;
??? Where x can be ANY NAME AT ALL. If so, the function returns a value.

(3) So when you see a function defined as

function getFontSize(id) {
// Returns the font size of the object with the value id
object = document.getElementById(id);
size = parseInt(object.style.fontSize);
return (size);
}
That means that YOUR CODE needs to call it *SOMETHING* like this:


var currentSize = getFontSize("slogan");

Do you SEE that? You must pass *ONE AND ONLY ONE* value--in this case the id of the field you want the font size of--and you will GET BACK one and only one value--in this case the font size of that field.

THAT IS JUST FOR STARTERS. *NOW* you have to write the code that uses that and makes sense of it.

Old Pedant
12-07-2010, 09:09 PM
How could my code be wrong when the program works with just the ball going when i get rid of the growtext function?

My head hurts. WHY would you think that the ball going in the hole is related IN ANY WAY AT ALL to the growText() code???????

Programs are not monolithic monsters. They are made up of many pieces. It's quite possible (and normal!!!) for 99.9% of a program to work and for there still to be a hundred bugs in the remaining 0.1% !!

Old Pedant
12-07-2010, 09:55 PM
You get in your car, you go out on the highway, you reach 65 miles per hour (or 100 kilometers per hour). Then you try to stop and the brakes don't work.

How could there be anything wrong with your car when it started rolling and steered just fine?

worldtraveller
12-07-2010, 10:11 PM
I quit!!

worldtraveller
12-07-2010, 10:12 PM
I am just desperate to get this javascript course done ! seems harder then i expected
geez. Just want to move on, so i rather be given the exact answers
as i really don't care to learn at this point as i rather just get a mark to pass and let this stuff sit behind me

looks like no one here wishes to help me in that aspect

Old Pedant
12-07-2010, 10:28 PM
...i really don't care to learn at this point as i rather just get a mark to pass and let this stuff sit behind me

looks like no one here wishes to help me in that aspect

You are correct. We don't want to help you pass a course when you don't understand the basic concepts.

We want you to learn the material.

If you had been asked to write an essay on "Explain how the value of the Euro affects the economy of Canada" would you have also posted a request on some forum for somebody to write it for you?

I suppose if you never expect to do any programming in the future, I can understand your attitude. I just know that when I was in school (MANY years ago), I did all my own homework, I studied all my own texts. And when I didn't quite get the grade I wanted...well, I knew it was my own fault. I guess I expect modern students to do the same.

Are you past the time when you can drop this course without penalty? If so, I feel sorry for you, but you should have realized sooner that you weren't prepared to do this work.

And, finally, we *HAVE* helped you. A lot. More than the rules of this forum would allow us, if the truth be known. Remember this:
http://www.codingforums.com/showpost.php?p=1021592&postcount=8
???

Finally, even if we do all your homework for you, surely that's not going to help you when you have to take the final examination. At least I would assume that your instructor would give such an examination, since of course cheating in a programming course is so easy to do.

Old Pedant
12-07-2010, 10:30 PM
By the way, if any of the information I gave you in post #8, above, was new or surprising to you, then clearly you really haven't understood any of the coding you have been attempting to do. It's just really sad that you didn't realize how ill-prepared you were before now.

worldtraveller
12-07-2010, 10:31 PM
Well how bout this , do you know of any good links you can supply that shows how to write a good function with dealing with changing font sizes
with conditions and anything dealing with external font sizes.

this seems to be a more intelligent program to work

so i will pick it to pieces and you will find me on here more and yes i do learn from proper answers
i can go on to my successes in IT so its not like im amateur just at Javascript is the tough one.

Old Pedant
12-07-2010, 10:54 PM
How about you START by reading the INSTRUCTIONS. Carefully. Again. And again.


i am to make a growText function

so to grow text from 0 to 21 points.

need to call getfontSize function as parameter to store value in variable named "fs"

create an if statement that tests value of fs variable is less then or equal to 20

if condition is met call change FontSize() function to increase size of slogan objact by 1

rerun growText function after delay of 20 milliseconds.


In this code:


function growText() {
getFontSize("slogan", 25);
if (fs <= 20) {
} else {
changeFontSize("slogan"+1);
getgrowText("slogan", 20);
}
}

You (a) NEVER assign the value from getFontSize to the variable fs.
(b) instead of doing something when the condition is MET you do it when it is *NOT* met! (You do the action after else!!)
(c) You don't call either getFontSize or changeFontSize with the right number of arguments.
(d) you call the NON-EXISTENT function getgrowText
(e) you have no code that even attempts to do a delay.

worldtraveller
12-07-2010, 11:08 PM
ok then, i know u wont give me the answers

then if i were to do this question properly how would i write it

do an example without using the same variables i need
just to show the example of how it should be properly written, then i know where to work from if u know what i mean, i still appreciate your help big time, too bad u are not teacher

Old Pedant
12-07-2010, 11:35 PM
*sigh*


function one()
{
var fs = function two("xxx"); // *ASSIGN* the result of the function to the variable
if ( fs <= 20 ) {
// the condition *IS* met
function three("xxx", 1); // This function takes *TWO* arguments
setTimeout( one, 20 ); // this is how you call something 20 milliseconds later
}
}

I don't know how I could be much more explicit without just using the right names. But it's late and I'm tired.

EDIT: Stuff in orange is a mistake. Double DOH on me.

Old Pedant
12-07-2010, 11:36 PM
And I really and truly thought my post #16 *WAS* giving you the answer. Excepting maybe for the use of setTimeout. The fact that you didn't understand that answer says volumes, you know.

worldtraveller
12-08-2010, 12:54 AM
Well it still not working
this is what i wrote


function growText(id)
{
var fs = function getFontSize("slogan"); // *ASSIGN* the result of the function to the variable
if ( fs <= 20 ) {
// the condition *IS* met
function changeFontSize("slogan", 1); // This function takes *TWO* arguments
setTimeout( growText, 20 ); // this is how you call something 20 milliseconds later
}
}

what seems wrong?

Old Pedant
12-08-2010, 01:27 AM
IYAMADORK.

SORRY! IN my zeal, I put in TOO MUCH code!

Okay, you deserve this one:


function growText( ) // function takes NO ARGUMENT
{
var fs = getFontSize("slogan"); // function takes one argument, returns one result
if ( fs <= 20 ) {
changeFontSize("slogan", 1); // This function takes *TWO* arguments
setTimeout( growText, 20 ); // this is how you call something 20 milliseconds later
}
}

worldtraveller
12-08-2010, 01:32 AM
Thanks a million. Ok now the ball is working but i still can not get the font to read i need

to get
Your Online Source of Golf Equipment

to be shown on the screen

what could i be doing wrong in my other code?

can i show u what i have on my page?

worldtraveller
12-08-2010, 01:35 AM
Thanks a million. Ok now the ball is working but i still can not get the font to read i need

to get
Your Online Source of Golf Equipment

to be shown on the screen

what could i be doing wrong in my other code?

can i show u what i have on my page?


<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 4
Case Problem 1

The Golf Page
Author:
Date: 05 December 2010

Filename: golfpage.htm
Supporting files: ball.gif, clouds.jpg, golf.js, golfer.gif, styles.css
-->
<title>The Golf Page</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="golf.js" type="text/javascript"></script>

<script type="text/javascript">



var x = new Array(-395, -389, -383, -377, -371, -365, -359, -353, -346,
-340, -334, -328, -322, -316, -310, -304, -297, -291, -285, -279, -273,
-267, -261, -255, -248, -242, -236, -230, -224, -218, -212, -206, -199,
-193, -187, -181, -175, -169, -163, -157, -150, -144, -138, -132, -126,
-120, -114, -108, -101, -95, -93, -91, -88, -86, -83, -81, -78, -76, -73,
-71, -69, -66, -64, -61, -59, -56, -54, -51, -49, -47, -44, -42, -39, -37,
-34, -32, -29, -27, -24, -22, -20, -17, -15, -12, -10, -7, -5, -2, 0);

var y = new Array(-300, -300, -300, -299, -298, -297, -296, -294, -292,
-290, -288, -285, -282, -279, -276, -272, -268, -264, -260, -255, -250,
-245, -240, -234, -228, -222, -216, -209, -202, -195, -188, -180, -172,
-164, -156, -147, -138, -129, -120, -110, -100, -90, -80, -69, -58, -47,
-36, -24, -12, 0, -5, -10, -14, -18, -22, -25, -29, -32, -34, -37, -39,
-41, -43, -45, -46, -47, -48, -48, -48, -48, -48, -48, -47, -46, -45, -43,
-42, -40, -37, -35, -32, -29, -26, -23, -19, -15, -11, -6, 0);

var index=0;
var lastindex=x.length-1;
// var fs=getFontSize("slogan");
function moveBall() {

if (index <= lastindex) {
placeIt("Ball", x[index], y[index]);
index++;
setTimeout("moveBall()", 5);
} else {
showit("slogan");
setFontSize("slogan", 25);
}
}


function growText( ) // function takes NO ARGUMENT
{
var fs = getFontSize("slogan"); // function takes one argument, returns one result
if ( fs <= 20 ) {
changeFontSize("slogan", 1); // This function takes *TWO* arguments
setTimeout( growText, 20 ); // this is how you call something 20 milliseconds later
}
}

</script>

</head>
<body onload="moveBall()">
<div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
<div id="Title">
THE G<div style="display: inline; position: relative; background-color: black;"
><img id="Ball" src="ball.gif" alt="O"
/></div>LF PAGE
</div>
<div id="box"
style="">
<span id="slogan">
Your Online Source of Golf Equipment
</span>
</div>
</body>
</html>


this is my page

do u need my golf.js page? too

worldtraveller
12-08-2010, 02:36 AM
I was wondering if my events handler is in the proper spot and presented properly?


</script>

</head>
<body onload="moveBall()">
<div id="Golfer" ><img src="golfer.gif" width="40px" alt="" /></div>
<div id="Title">


is what i have at the end of the golf.htm

would i need to create another function
such as a placeObjects function?

What are the suggestions?

Old Pedant
12-08-2010, 03:01 AM
That's okay.

Try changing your moveBall:


function moveBall()
{

if (index <= lastindex) {
placeIt("Ball", x[index], y[index]);
index++;
setTimeout(moveBall, 5);
} else {
showit("slogan");
setFontSize("slogan", 1);
growText();
}
}

I'm out of here. May not be back tonight.

worldtraveller
12-08-2010, 04:28 AM
Did some modifying on moveball but to no results still.

even looked at adding another function to golf.js
but that did not work either
but that was not what assignment was asking

at least part of my program is working now
but its a mystery still

Old Pedant
12-08-2010, 07:18 AM
You really do just absolutely refuse to use FireBug, don't you?

After this, I *WILL NOT ANSWER ANY QUESTION* where it is obvious that you haven't used FIreBug to try to track down the bug. And I won't even warn you about the reason for now answer.

Look here:

function showIt(id) {
...

Then look here:

} else {
showit("slogan");


Once more: JAVASCRIPT IS VERY VERY FUSSY. Yes, upper/lower case *MATTERS*.

Note that the VERY FIRST TIME I loaded the code in my FireFox browser and turned on FireBug, I *immediately* got an error notification that "showit" didn't exist. And of course it doesn't.

Enough said???

Your obstinate refusal to use FireBug has surely cost you HOURS of your own time and has certainly taken up a lot of my time.

No FireBug, no help.

worldtraveller
12-08-2010, 02:24 PM
I have used firebug! but was not getting any feedback though

thanks for the point out, it partially works now

Old Pedant
12-08-2010, 06:28 PM
It worked 100% for me. And the *ONLY* change I made was that one.

And if FireBug didn't tell you what the error was, then you are using FireBug wrong.

worldtraveller
12-08-2010, 06:47 PM
firebug is not saying any errors.

My output is not 100%

what is your output. You are supposed to see the ball go across and land in the Golf o
and the slogan is supposed to change in size

however i get the ball moving and the slogan appears after the ball lands, i can not see it growing, if we have same code then what is up? i made that change, and still nothing,

just curious as to what u saw as output?thanks

Old Pedant
12-08-2010, 07:16 PM
The ball goes in the hole. The sign grows. It works 100%.

worldtraveller
12-08-2010, 07:24 PM
supply the code i gave u them, that u get to work correctly?

both for golf.htm
and golf.js

i dont know how it could not work if i gave u the code

Old Pedant
12-08-2010, 07:25 PM
http://www.plopon.com/golfpage.htm

I changed the names of the css and js files, but otherwise it's identical.

worldtraveller
12-08-2010, 07:34 PM
found my mistake

i had it in moveball
thanks a million works great now

ldoublee75
04-03-2011, 09:36 PM
I have been fighting with my code for two days and I finally found some help! I appreciate you making him, and me, learning the code and not just giving the answer. While my mistakes were minor they were enough to frustrate me! Also, thanks for the Firebug recommendation, I will be using that for now on!
Thanks again,
Ldoublee75



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum