Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy document.write(variable) - can't find the answer to this!

    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.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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)

    PHP Code:
    <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> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?!?


  • #5
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts

    Thumbs up

    ...and here's the DOM method (it is a W3C recomanded)
    PHP Code:
    <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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New Coder
    Join Date
    Dec 2004
    Location
    Portsmouth, UK
    Posts
    27
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!).


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •