Author Topic: Updating text on a page (Read 10878 times)

mike_g · « **on:** March 14, 2007 »

Hey benny, heres the code for the javascript game I made, with css and all. Be warned its pretty crude. Bascially you get 3 minutes to answer as many questions as possible. You score 10 points for each correct one, and lose 5 for each one thats wrong. Oh yeah version 1 works, version 2 dosent.

Heres my problem: At the moment the only way I know how to update text on the screen is by either having it inside a form field, or by redrawing the entire page. You will notice that the target score is in a form field, but I would like it drawn in text.

I figured that it should be possible to update it by creating an object for it and then writing a member function for the object to update the text since the timer and input fields are both capable of doing this. In version 2 I got the target set as a variable in an object but when it changes I dont know how to update it on the screen

cheers

benny! · « **Reply #1 on:** March 14, 2007 »

@mike_g:

1st - I am really impressed. The game is well designed and looks very cool.

I think the easiest way to simply update a certain region in a html file is to
use the innerHTML property of e.g. <div> tags. Here is a little
example I wrote that might help you :

Code: [Select]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Updating text on a page</title>
		<script>
			function updateText() {
				document.getElementById( "updatedArea" ).innerHTML = "Text updated!";
			}
		</script>
	</head>
	<body>
		<div id="updatedArea">This text will be updated</div>
		<a href="javascript:updateText();">Update</a>
	</body>
</html>

As you can see, I wrapped a <div> tag around the region which I want to update.
In the javascript funtion I simply grab the div with the document.getElementById()
function and set a new property to innerHTML. Thats basically all.

Hope this helps you. And again - your game looks cool!

mike_g · « **Reply #2 on:** March 14, 2007 »

Thanks man, your codes helpful

I'll make mine so that its using divs then. If i find the time i might make a version using images instead of those tiny checkboxes too.

benny! · « **Reply #3 on:** March 14, 2007 »

I am happy that I could help.

You should definately finish it. I really do like it. And with all that javascript and ajax
hype going on atm - I think such a nice javascript game would get good recognition.

mike_g · « **Reply #4 on:** March 14, 2007 »

I'm glad you like it

At the end of the day though a game cant get much simpler than this. If I find the time i'll try and add some variety. Shockwave had a couple of good suggestions earlier.

benny! · « **Reply #5 on:** March 14, 2007 »

Yup. Using different systems next to binary like hex would be a nice addition.
Although I think the binary is the geekiest of them ;-)

Anyway, please do keep us informed whenever you make a new version !!!

mike_g · « **Reply #6 on:** March 14, 2007 »

Will do

mike_g · « **Reply #7 on:** March 23, 2007 »

Hey benny! I have been playing around with javascript a bit more today and made an update of that game I made. Things are a bit more polished, the games now got levels that get harder, and every second level is in hex.

You can play it here. Cheers.

benny! · « **Reply #8 on:** March 23, 2007 »

@mike_g:

Just awesome ! Very cool ... although I sucked at my first try :

Quote

Game Over. You scored: 35 points.

One thing I would change though would be the Game Over
screen. Maybe a little <div> just beneath the actual game and
update that, when a game is over.

Nevertheless, great javascript-game

If you are familiar with php and your host support it - a little high-
score system would be rocking

Keep it up!

mike_g · « **Reply #9 on:** March 23, 2007 »

Yeah the game over thing sux. Its one of the bits I havent got around to yet. Might try and make it so that the earlier levels give you easier numbers to work out rather then just random generated. Maybe I should make the time limit a little longer too. I dont know anything about PHP yet, but I'll be doing it soon in college. So when I get around to it I might add a highscore table. Cheers

Shockwave · « **Reply #10 on:** March 24, 2007 »

I am thick

I only scored 35.

p01 · « **Reply #11 on:** March 24, 2007 »

Quote from: benny! on March 14, 2007

In the javascript funtion I simply grab the div with the document.getElementById()
function and set a new property to innerHTML. basically all.

It updates the content of the node, granted.
But this is not the way to go. It can be unsafe ( JavaScript can be injected and IS executed ), and last but not least it nukes the event listeners of the updated node and its children ( if you append to the innerHTML instead of replacing it ).

What you should do instead is:

for very basic display: update the nodeValue of the textNode(s)
for slightly more advanced display: build the TextNodes and other HTMLElements yourself using regular DOM methods
for advanced display including HTML: create a dummy element or better, a documentFragment, outside of the document ( do NOT append it in the document ), set its innerHTML to what you received from your XHR or function, this way you get a valid DOM tree and the eventual scripts it contains are not executed, then sanitize the f**ker using a blacklist of nodes and attributes to nuke the undesired/harmful things, and finally insert the sanitized nodes in the target element.

If need be I can provide the code of my sanitizer.

Hope that helps,

mike_g · « **Reply #12 on:** March 24, 2007 »

Hey thanks for the advice. I hadent really thought about code injection stuff yet. Most of the terms you are talking about I don't quite get yet, but are you saying that the stuff to update should get validated before it gets chucked into the element? If possible a code example could be helpful. Cheers.

p01 · « **Reply #13 on:** March 24, 2007 »

You should not trust what you receive, especially content from an external source. If you want to update the display of something, use textNodes, or sanitize the input.

The idea is to remove undesired and potentially harmful elements and attributes ( such as inline style and events that can be used for script injection ) before you append them in the document. To do so, DOM manipulation outruns string manipulation. Any day.

What you receive from an XHR, or any other function, may not be valid XML ( mostly due to badly nested nodes, bad entities, ... ) and thus DOM methods are not available.

When you do elementFoo.innerHTML = textVersionOfMarkup the browser cleans the crap and generate a usable DOM tree on which you can call any regular DOM methods such as adding/updating/removing nodes/attributes.

FWIW, I prefer to use a white-list of nodes and attributes. This way I'm sure of what I'm up to inject in my document.

the code is not on my USB stick. I'll post it next time I go to the office ( which might be tomorrow

as I have to finish something before our team meeting on monday morning )

Shockwave · « **Reply #14 on:** March 24, 2007 »

Fuck, you can have some good karma for having to work on Sunday as well as giving some good advice. Thanks.

mike_g · « **Reply #15 on:** March 24, 2007 »

Okay I just updated my game. The new bits are:

-Buttons drawn as images instead of those fiddly checkboxes
-Game dosent start until you click begin.
-On game over the game gets reset.
-Your highscores get saved to a cookie.
-Time limit set higher.

I'm finished with it now, except perhaps if it would be good to change some of the stuff that uses innnerHTML. Heres the link to it again. Cheers.

p01 · « **Reply #16 on:** March 25, 2007 »

I hadn't try the game before. It's fun, I just scored 354

The code is a bit oldschool

There is no need for all the document.write(), you can write most of the things in the HTML markup and display the highscore in the onload event.
You should use CSS sprites for the red lights to eliminate the latency of a swap image.
the hex/dec conversions are cumbersome. FYI toString() have an optionnal 2nd argument to set the base. So to convert a decimal integer into hex string, all you need to do is:

hexString = '0x'+ ('000000'+decInteger.toString(16)).slice(-desiredNumberOfCharacters)

the ('00000'+foo).slice(-n) is there to prefix the hexInteger by as many 0s as you need.
Here comes a cleaner UpdateText() method:

function UpdateText(area, change_to)
{
tmp = document.getElementById(area)
if( tmp!=null && tmp.firstChild!=null && tmp.firstChild.nodeType==3 )
tmp.firstChild.nodeValue = change_to
}

HTH

p01 · « **Reply #17 on:** March 25, 2007 »

It'd rock if you logged the clicks to have a replay of the high score

mike_g · « **Reply #18 on:** March 25, 2007 »

Thanks man. I'll try use some of your suggestions to make the code better. It would be nice not to have to use document.write all the time. And yeah logging the clicks is a cool idea

benny! · « **Reply #19 on:** March 25, 2007 »

@mike_g:

Damn, your game gets better and better. I really like the design as well !!!
Adding counting clicks and some highscore just would make it perfect!

@p01:

Never thought about checking incoming values before. Thanks for pointing
that out and your advanced explanation. Definately, Karma up.

I'll will keep this in mind next time I code in javascript.

@topic:

Code: [Select]

if( tmp!=null && tmp.firstChild!=null && tmp.firstChild.nodeType==3 )
Here is a list of available nodeTyp values :

http://www.javascriptkit.com/domref/nodetype.shtml