Remaining on same page

webguy08

01-27-2009, 03: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, 03: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, 12: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, 07: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, 08:13 AM

Have you tried my above posted code?

Yes.

5 char

webguy08

02-01-2009, 08:35 PM

So does anyone know?

freedom_razor

02-01-2009, 09: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, 09: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.