...

View Full Version : Remaining on same page



webguy08
01-27-2009, 04:15 PM
Hi all,
I decided to start learning JavaScript yesterday and I have come up with the following code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JS Practice</title>
</head>

<body>

<form method="post">
<input type="button" value="Add to basket" name="Add to basket" onclick="addToBasket()"/>
</form>

<script type="text/javascript">
var tshirt = 34.99;
var total = 0;
var i = 0;
function addToBasket() {
var clothesArray = new Array(i);
total = total + tshirt;
clothesArray[i] = total;
document.write(clothesArray[i]);
i = i + 1; }
</script>

<script type="text/javascript">
document.write(total);
</script>

</body>

</html>


Whenever I run the addToBasket() function it loads a new page, but I don't want that to happen. I want it to remain on the same page and see the value being increased.

How would I go about doing so?

Thanks for any help :cool:

abduraooft
01-27-2009, 04:23 PM
You might need something like

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>JS Practice</title>
<script type="text/javascript">
var tshirt = 34.99;
var total = 0;
var i = 0;
function addToBasket() {
var clothesArray = new Array();
total = total + tshirt;
clothesArray[i] = total;
//alert(clothesArray[i]);
//document.write(clothesArray[i]);
document.getElementById('mySpan').innerHTML=clothesArray[i];
i = i + 1;
}
</script>
</head>

<body>

<form method="post">
<input type="button" value="Add to basket" name="Add to basket" onclick="addToBasket()"/>
</form>
<span id="mySpan"></span>
</body>
</html>as document.write() executes at the time of page load.

webguy08
01-28-2009, 01:50 AM
as document.write() executes at the time of page load.

Is there a way to show the value on the same page without reloading it or having a popup box?

abduraooft
01-28-2009, 08:11 AM
Is there a way to show the value on the same page without reloading it or having a popup box?
Have you tried my above posted code?

webguy08
01-28-2009, 09:13 AM
Have you tried my above posted code?

Yes.

5 char

webguy08
02-01-2009, 09:35 PM
So does anyone know?

freedom_razor
02-01-2009, 10:46 PM
The code posted by abduraooft does what you want. It shows the value on the same page, just below the button ''without reloading it or having a popup box''.

TheTot
02-01-2009, 10:51 PM
So does anyone know?

The code posted by abdur does exactly what you need to. He uses getElementById to access and dynamically change page content for you.

I hope this explains it a little better:
All of the code in your original post is performed right when the page loads. That's it. The page loads, executes your code, and then it's over. You can't change it.

What abduraooft did was place some of the code into functions, which means they are not executed until told to.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum