Begginer ... question ...

**Dave** · Jul 23 '05, 07:12 PM

Re: Begginer ... question ...

A made a few changes and it seems to work now.

I changed the callWrite() method and I changed the onClick handler in
the div to call callWrite().

Click the old text to get the new text.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Proba</title>
</head>
<style type="text/css">
#plavidiv{
background-color:#0066FF;
width:600;
height:20;
}
</style>

<script language="javas cript">
function callWrite(){
var mydiv = document.getEle mentById("plavi div");
mydiv.childNode s[0].nodeValue = "i want this to be inside div tag
.... but its not! the .write method seems to erase all html ... ";
}
</script>

<body>
<div id="plavidiv" onClick="callWr ite();">this is the content i
want to
malipulate with javascript...</div>

</body>
</html>

**gor@n** · Jul 23 '05, 07:12 PM

Re: Begginer ... question ...

Thanx, but Opera and Firefox doesnt work. I dont know ... did you check
in browser (runtime) ?

So, i prosume .nodeValue is some method to write inside the div tag. ?
..childNodes[0] is the return value of mydiv with index of [0], why
index? Does it means if #plavidiv has more than one <div> tag, so it can
be located? I dont know why this doesnt work.

Sory in my english :)

**gor@n** · Jul 23 '05, 07:12 PM

Re: Begginer ... question ...

one more thing, my document is document1.html, on some forums on net I
see that people are talking about XML Node Value, maybe thats why it
doesnt work ? Can it be truth that NodeValue is a XML thing ?

**RobB** · Jul 23 '05, 07:12 PM

Re: Begginer ... question ...

gor@n wrote:[color=blue]
> one more thing, my document is document1.html, on some forums on net[/color]
I[color=blue]
> see that people are talking about XML Node Value, maybe thats why it
> doesnt work ? Can it be truth that NodeValue is a XML thing ?[/color]

Calling a non-existent function: bad. Your HTML could use some work,
too. Try this...

<!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>Proba</title>
</head>
<style type="text/css">
#plavidiv{
background-color:#0066FF;
width: 600px;
font-size: 140%;
padding: 4px;
cursor: pointer;
}

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

function callWrite(obj, text)
{
if ('string' == typeof obj)
obj = document.getEle mentById(obj);
if (obj)
{
while (obj.hasChildNo des())
obj.removeChild (obj.lastChild) ;
obj.appendChild (document.creat eTextNode(text) );
}
return false;
}

</script>
<body>
<div id="plavidiv" onclick="callWr ite(this,'I want this to be inside
div tag ... but it...is !')">
this is the content i want to malipulate (?) with javascript...
</div>
<a href="#null" onclick="return callWrite('plav idiv','Now, it says
Hello, world !')">next</a>
</body>
</html>

google "javascript DOM" for more...lots more -

**RobG** · Jul 23 '05, 07:12 PM

Re: Begginer ... question ...

gor@n wrote:[color=blue]
> I would like to find out how javascript can change some text (string)
> inside <DIV> tag with event onClick.
> That i want to solve with function callWrite(); ... so you can see in
> the code. The thing should be simple, not to me ofcourse.
>
> I dont have a clue, but maybe method getElementById may have somthing to
> do with solving my problem. I dont know.
>[/color]
[...]

For a useful, free, on-line introduction to JavaScript (and HTML,
CSS, etc.) try:

<URL:http://www.w3schools.c om/>

--
Rob

**gor@n** · Jul 23 '05, 07:13 PM

Re: Begginer ... question ...

Thnx, but the code you made seems not working in 3 browsers, i dont
know? But this stuff is usefull, and it will help me to study this methods.

In w3schools.com i found great example. But i have to figure it out how
this works with divs.

<html>
<head>
<script type="text/javascript">
function myHref()
{
document.getEle mentById('myAnc hor').innerText ="Visit W3Schools"
document.getEle mentById('myAnc hor').href="htt p://www.w3schools.c om"
}
</script>
</head>

<body>
<a id="myAnchor" href="http://www.microsoft.c om">Visit Microsoft</a>
<form>
<input type="button" onclick="myHref ()" value="Change URL and text">
</form>
</body>

</html>

I have expirience in programming but not in web so I cant belive this "
"simple" expample can be so complicated.

So the .innerText is the method that writes inside the HTML ?

**runonthespot** · Jul 23 '05, 07:13 PM

Re: Begginer ... question ...

Try this
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Proba</title>
</head>
<style type="text/css">
#plavidiv{
background-color:#0066FF;
width:600;
height:20;

}

</style>

<script language="javas cript">
function callWrite(dest) {
document.getEle mentById(dest). innerText="i want this to be inside
div tag ...";
}
</script>

<body>
<div id="plavidiv" onClick="callWr ite(this.id);"> this is the
content i want to
malipulate with javascript...</div>
</body>
</html>

Some points-- you pass the callWrite the id of the object you want to
write to- makes it slightly more usefully generic. You could of course
add a second parameter for the actual text to change it too. These
sort of methods are becoming an increasingly popular way of changing
content on screen without a server run.

Use getElementById and never be tempted to use document.all. as it's IE
specific.

I personally avoid using childnodes etc.. they're supposed to be the
"right" way of doing things, but IMHO it makes code hard to read and
impossible for someone else to debug. Just my 2p :-)

Mike R.

**Dave** · Jul 23 '05, 07:14 PM

Re: Begginer ... question ...

In article <d3mik6$p42$1@s s405.t-com.hr>, goooran.k@gmail .com says...[color=blue]
> Thanx, but Opera and Firefox doesnt work. I dont know ... did you check
> in browser (runtime) ?
>
> So, i prosume .nodeValue is some method to write inside the div tag. ?
> .childNodes[0] is the return value of mydiv with index of [0], why
> index? Does it means if #plavidiv has more than one <div> tag, so it can
> be located? I dont know why this doesnt work.
>
> Sory in my english :)
>[/color]

I have firefox 1.0 and it works for me. I don't have Opera, so I can't
check that.

Check and make sure that the long string literals were not wrapped by
your news reader.

At the end I've attached a new version with shorter string literals
which will be less susceptible to line wrapping.

..nodeValue is a property on objects in a DOM tree. getElementById gets
the object representing the div. The text in the div element is a child
node which you get to with the .childNode array.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Proba</title>
</head>
<style type="text/css">
#plavidiv{
background-color:#0066FF;
width:600;
height:20;
}
</style>

<script language="javas cript">
function callWrite(){
var mydiv = document.getEle mentById("plavi div");
mydiv.childNode s[0].nodeValue = "New Text";
}
</script>

<body>
<div id="plavidiv" onClick="callWr ite();">Old text</div>

</body>
</html>

**Thomas 'PointedEars' Lahn** · Jul 23 '05, 07:14 PM

Re: Begginer ... question ...

gor@n wrote:
[color=blue]
> Thanx, but Opera and Firefox doesnt work. I dont know ... [...][/color]

I know why. Firstly, it is far from being Valid HTML or CSS.
Use <http://validator.w3.or g/> to validate your markup and if it became
Valid, validate your stylesheet.

Secondly, it lacks feature tests on the UA's DOM prior to usage and it
lacks tests on the objects returned prior to access. Use the JavaScript
Console of both UAs to see what goes wrong with the script and use Venkman
in Firefox (ask Google for the XPI) to debug it if necessary.

PointedEars

Begginer ... question ...

Begginer ... question ...

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment