Changing contents of a DIV on-the-fly?

mlse

08-14-2005, 10:20 AM

Hi.

I have a requirement to do something which, on the face of it, seems pretty simple!

In it's simplest incarnation, it would just be a button, somewhere on a page, which, when clicked, would cause the content of something else on the page to change.

Here is an example of a noddy piece of code which I wrote to try and do this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional/EN">
<html>
<head>
<title>"Dynamic Content Test"</title>

<script language="javascript" type="text/javascript">

var counter = 0;

function doIncrement(id)
{
thing = document.getElementByID(id); //Get the thing to be fiddled with.
thing.content = counter; //Fiddle with it.
counter++; //Increment the counter.
}

</script>
</head>

<body>
<input type="button" value="click me" onclick="doIncrement('counter-display');">
<div id="counter-display"></div>
</body>
</html>

What I was hoping for was a web page that starts with a single button on it and nothing else (this is all fine).

When the user first clicks the button, "0" should appear under the button. Subsequent clicks should cause the number under the button to be incremented in steps of 1 each time. This, however, does not happen! All I get in the error tally for the web browser is - "error on line <whatever> (the line it complains about is thing = document.getElementByID(id);) - object does not support this property or method".

I have tried several variations on the theme (all of which seem to be even further from the mark!).

What am I doing wrong?

Thanks,
Mike.

martin_narg

08-14-2005, 10:34 AM

document.getElementById - the last d should be lower case mate.

also this line:

thing.content = counter; //Fiddle with it.

would be better off as:

thing.innerHTML = counter;

hope this helps

m_n

mlse

08-14-2005, 10:36 AM

Hmmmm ...

I have managed to do it using a text input called "display" inside a dummy form called "myform" and then using the javascript:

var counter = 0;

function increment()
{
document.myform.display.value = counter;
counter++;
}

this works fine, but is there any way to get at divs that are inside a form?

I think I'm getting there ....

martin_narg

08-14-2005, 11:13 AM

accessing the div using getElementById is independent of accessing form object elements mate. ie it should make no difference if the div is inside or outside of the form as that method targets only the id of the html element.

This is a working script that you hopefully will able to use:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script type="text/javascript">
var count = 0;
function doIncrement(sId) {
count++;
document.getElementById(sId).innerHTML = count;
}
</script>
<style type="text/css">
body {
font-family: "Courier New", Courier, mono;
font-size: 12px;
color: #000000;
}
</style>
</head>

<body>
<form name="frmCounter">
<input type="button" name="btn" value="Count" onclick="doIncrement('divCounter');">
<div id="divCounter"></div>
</form>
</body>
</html>

Hope this helps

m_n

mlse

08-14-2005, 12:09 PM

Thanks!

I also found a nice site in one of the pinned topics: http://www.javascriptkit.com/jsref/

This is helping a lot also as I am a Javascript newbie!