Begginer ... question ...

G

gor@n

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.


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="javascript">
function callWrite(){
document.write("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="zovi();">this is the content i want to
malipulate with javascript...</div>
</body>
</html>
 
D

Dave

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="javascript">
function callWrite(){
var mydiv = document.getElementById("plavidiv");
mydiv.childNodes[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="callWrite();">this is the content i
want to
malipulate with javascript...</div>

</body>
</html>
 
G

gor@n

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 :)
 
G

gor@n

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 ?
 
R

RobB

gor@n said:
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 ?
Click to expand...

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/str­ict.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.getElementById(obj);
if (obj)
{
while (obj.hasChildNodes())
obj.removeChild(obj.lastChild);
obj.appendChild(document.createTextNode(text));
}
return false;
}

</script>
<body>
<div id="plavidiv" onclick="callWrite(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('plavidiv','Now, it says
Hello, world !')">next</a>
</body>
</html>

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

RobG

gor@n said:
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.
Click to expand...
[...]

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

<URL:http://www.w3schools.com/>
 
G

gor@n

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.getElementById('myAnchor').innerText="Visit W3Schools"
document.getElementById('myAnchor').href="http://www.w3schools.com"
}
</script>
</head>

<body>
<a id="myAnchor" href="http://www.microsoft.com">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 ?
 
R

runonthespot

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="javascript">
function callWrite(dest){
document.getElementById(dest).innerText="i want this to be inside
div tag ...";
}
</script>


<body>
<div id="plavidiv" onClick="callWrite(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.
 
T

Thomas 'PointedEars' Lahn

gor@n said:
Thanx, but Opera and Firefox doesnt work. I dont know ... [...]
Click to expand...

I know why. Firstly, it is far from being Valid HTML or CSS.
Use <http://validator.w3.org/> 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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I hide the modal after 5 seconds? 4
Filename undefined for Blob ? 1
Centering a button using flexbox 2
Help with code 0
Please Help? 0
How can I add arrows to my FAQ 0
Javascript DOM 1
Positioning CSS components 1

Members online

Total: 30 (members: 1, guests: 29)
Robots: 646

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top