...

View Full Version : document.write(variable) - can't find the answer to this!



GB Joe
12-10-2004, 03:55 PM
Hello there!

Here we go with my second post, and second stupid question (no doubt).

It's a simple task I'm trying to achieve, and half of it works. I have an image divided into 4 bits with a map, and if you click on each section it fades into the appropriate new image seamlessly, courtesy of brothercake's handy little script.

At the same time, I want to be able to change some text under the image, and that doesn't sound like a terribly difficult thing to me! However, I can't seem to figure it out... Let me show you what I'm trying to do it with (I've cut out the image map and fade stuff for simplicity):

<head>
<script type="text/javascript">
txt = "starting text";
function choosecaption(clicktxt)
{
txt = clicktxt;
}
</script>
</head>

<body>
<a href ="#" onclick="choosecaption('first new text')"><img src="1234-1.gif"></a>
<a href ="#" onclick="choosecaption('second new text')"><img src="1234-2.gif"></a>

<script type="text/javascript">
document.write(txt);
</script>
</body>

I'll admit I'm not too sure about how the whole function/argument/variable thing works yet, so there may be some blatant errors or misconceptions in there. Boldly assuming that I've got the general idea right, I've searched through the forum for answers and found things which look similar and suggest using innerHTML, but alas I am too dense to know if this is what I need and if so how to apply it to my own situation. The key thing for me here is that the click is affecting something other than the thing that you click, and that doesn't seem to come up very often in examples I've seen.

Thank you all in advance for any help!

Joe.

Kor
12-10-2004, 04:58 PM
document.write() is not a dynamic method. It is fired only once, on loading the document. Onclick nothing else happend, except that the variable changes its value, but there is no other function or method called, thus there is nothing which can change the document.

Try innerHTML method (or DOM methods)



<head>
<script type="text/javascript">
function choosecaption(clicktxt){
document.getElementById('mydiv').innerHTML =clicktxt;
}
</script>
</head>
<body>
<a href ="#" onclick="choosecaption('first new text')"><img src="1234-1.gif"></a>
<a href ="#" onclick="choosecaption('second new text')"><img src="1234-2.gif"></a>
<br><br>
<div id="mydiv">starting text</div>
</body>

GB Joe
12-10-2004, 05:14 PM
Fantastic!

Works straight off. Now to see if I can combine that with the rest of my plans...

Thank you sir! You have made my day! :thumbsup:

GB Joe
12-10-2004, 05:29 PM
YES!

All code combined perfectly, I've got lovely cross-fading images with accompanying captions underneath.

I am a very happy bunny.

Kor, I don't suppose you fancy taking a look at my DynamicDrive question do you?!?

;)

Kor
12-10-2004, 05:29 PM
...and here's the DOM method (it is a W3C recomanded)


<head>
<script type="text/javascript">
function choosecaption(clicktxt){
var root = document.getElementById('mydiv');
while(root.hasChildNodes()){
root.removeChild(root.childNodes[0])
}
var oTxt = document.createTextNode(clicktxt);
root.appendChild(oTxt);
}
</script>
</head>
<body>
<a href ="#" onclick="choosecaption('first new text')"><img src="1234-1.gif"></a>
<a href ="#" onclick="choosecaption('second new text')"><img src="1234-2.gif"></a>
<br><br>
<div id="mydiv">starting text</div>
</body>


I would use this one... :cool:

Kor
12-10-2004, 05:35 PM
a look at my DynamicDrive question do you?!?

I've seen it. Unfortunately is is easier to build a new brand code than to modify another. The main ideea is that IE and Moz uses different CSS style attributes for opacity, thus you must use a detector and double methods for that. Serach these forums, there might be some crossbrowsers solution around here.

Kor
12-10-2004, 05:39 PM
http://www.codingforums.com/showthread.php?t=36324&highlight=fade+opacity
for a IE solution
http://www.codingforums.com/showthread.php?t=36324&highlight=fade+opacity
looks like a crossbrowser

tests them

GB Joe
12-10-2004, 05:55 PM
Woah there!!!

Okay, going back to the W3C solution, it kind of works but it's not recognising the <br> tag I've put in the clicktxt argument - just shows the tag on the screen. The original answer handled it okay. Also, it looks darned complicated and I don't understand it at all! What would be the disadvantage of going the original way?

Thanks for the links - I'll get on to them right away and see what I can do (although I'll be quitting for the weekend pretty soon - not sure when I'm going to be in front of a PC next!).



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum