...

View Full Version : Help with document.write



amster
12-22-2011, 12:04 AM
Hello, I'm new to Javascript.

I know how to make a script that when you click on a button it changes a variable. I also know that with document.write I can express this variable but I do not know how to refresh document.write!

For example,

if I have a var car =3
and when I click on a button car++ (or increases by 1 so it becomes 4 then 5 and so forth depending how many times you click the button)
and I write document.write (car), it only shows the 3 and no matter how many times I click on the button, the 3 doesn't change. How can I get the document.write to show the updated variable?

Thanks!

So I want to have a button that when I click it will change this variable and that number will change live on the page.

Old Pedant
12-22-2011, 12:11 AM
You can *NOT* use document.write in response to *ANY* human interaction.

That's because if you use document.write after the HTML page is fully loaded, it *WIPES OUT* the entire HTML page, including even the JavaScript that did the document.write.

In general, you should simply avoid using document.write. There are a few things it can be used for, but until you understand what they are, it's best to just avoid it completely.

The most general way to change page content is to use

document.getElementById("someId").innerHTML = ...new content...

If the element in question is a <form> field, use .value in place of .innerHTML.

So in your case, you might have

Number of cars: <span id="carCount"></span>

And so you would use


document.getElementBYId("carCount").innerHTML = ++car;

or something along those lines.

Old Pedant
12-22-2011, 12:13 AM
Another way to do it:


Number of cars: <input type="button" name="cars" value="1" onclick="this.value=(Number(this.value)+1);"/>

So the button's value would actually be the number of cars. And by clicking on it, you use increase the number that the button shows by one.

amster
12-22-2011, 12:50 AM
Thanks but I'm still a bit confused. How exactly would I go about writing this code then?

Like a simple one which would say: You have X cars.

And when you click a button, this X increases by 1.

So if it says: You have 3 cars then I click the button, the text will instantly change to: You have 4 cars.

Old Pedant
12-22-2011, 12:58 AM
I showed you two different ways, already. If you don't show your HTML code, I can't very well guess at exactly what it is you need.

The simplest possible page:


<html>
<body>
<form>
You have <span id="cars">3</span> cars.
<hr/>
<input type="button" value="more cars"
onclick="var s=document.getElementById('cars');s.innerHTML=(Number(s.innerHTML)+1);"/>
</form>
</body>
</html>

But I suspect that isn't what you want. But without you showing me your page, I don't know what else to show you.

amster
12-22-2011, 01:02 AM
Oh ok thanks a lot! This is totally HTML though. Is there any way to do this with javascript then?

Sorry if I sound very noobish, I've just started coding for the first time in my life today haha.

Old Pedant
12-22-2011, 01:23 AM
Ummm...that *IS* javascript.



<input type="button" value="more cars"
onclick="var s=document.getElementById('cars');s.innerHTML=(Number(s.innerHTML)+1);"/>

The part in red there is JavaScript.

You can't write onclick handlers (or any kind of event handler) in HTML alone. You have to use JavaScript to do so.

There's no difference between doing what I showed there and doing it like this, instead:


<html>
<head>
<script type="text/javascript">
function zamberDoodlyWonkus( )
{
var s=document.getElementById('cars');
s.innerHTML=(Number(s.innerHTML)+1);
}
</script>
</head>
<body>
<form>
You have <span id="cars">3</span> cars.
<hr/>
<input type="button" value="more cars"
onclick="zamberDoodlyWonkus( );"/>
</form>
</body>
</html>

Yes, I chose a silly function name...just to emphasize that names are pretty much up to you. Sure, a more reasonable name might have been "bumpCarsCount()". But JavaScript doesn't care.

amster
12-22-2011, 02:19 AM
Ok I see. Thanks a lot for your help! I still have lots and lots to learn haha.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum