SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    reducing innerHTML > function set

    In my current folio site I have used IDed spans with the innerHTML command to alter descriptions of folio items.

    I have 3 text strings that are all changed: Title, Dimensions and Description.
    The spans are called worktitle, dimensions and about, respectively.

    Each button in the section sub-menu has the following set of commands (with varying texts):

    onclick="worktitle.innerHTML='title blah blah'; dimensions.innerHTML='dimensions blah blah'; about.innerHTML='description blah blah';"

    I would like to be able to use functions instead and turn the set into something like:

    onclick="textOne('title blah blah'); textTwo('dimensions blah blah'); textThree('new description blah blah.');"

    ...or ideally, turn the set into one function that can refer to and change all three texts. Something like:

    onclick="textWrite('title blah blah', 'dimensions blah blah', 'description blah blah')"

    My absolute beginner's knowledge of javascript is still insufficient to do this without help.
    Anyone here want to to show me how it's done?

    Thanks in advance
    Last edited by Bill Posters; Apr 29, 2002 at 06:04.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  2. #2
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hope this helps

    PHP Code:
    <script type="text/javascript">

        function 
    replace_inner(w_titlesizeinfo)
        {
            if (
    w_title == null || size == null || info != nullalert ('w_title or size or info missing')
            else
            {
                
    with (document)
                {
                    
    worktitle.innerHTML    w_title;
                    
    dimensions.innerHTML    size;
                    
    about.innerHTML        info;
                }
            }
        }

    //called by

    replace_inner('w_title''size''info');

    </script> 
    Last edited by Andrew-J2000; Apr 29, 2002 at 06:57.

  3. #3
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    or a single peice of text, because 'this' is used, u have to put it in the thing thats being overwritten

    PHP Code:
    <script type="text/javascript">

        function 
    replace_inner(objtxt)
        {
            if (
    obj == null || size == nullalert ('w_title or size or info missing')
            else
            {
                
    with (obj)
                {
                    
    innerHTML    txt;
                }
            }
        }

    //called by

    replace_inner(this'mty text');

    </script> 
    Last edited by Andrew-J2000; Apr 29, 2002 at 06:55.

  4. #4
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx yet again, Andrew...

    I'm trying the first:

    <script type="text/javascript" language="javascript">
    function replace_inner(w_title, size, info) {
    if (w_title == null || size == null || info != null) alert ('w_title or size or info missing')
    else {
    with (document) {
    worktitle.innerHTML = w_title;
    dimensions.innerHTML = size;
    about.innerHTML = info;
    }
    }
    }
    </script>


    ...with the following event:

    onclick="replace_inner('02. Photography #1','Various','Selected environmental photographs.');"


    It doesn't change the text, but sets off the alert when I click on that button.

    I removed the...
    replace_inner('w_title', 'size', 'info'); from the function.

    I wasn't sure if that was meant to be there.
    When it was, it would set off the alert when the page was loading as well as when I clicked on the button (and also not change the text)

    Where am I going wrong?
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  5. #5
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here

    i messed up when i posted it, its supposed to be

    if (w_title == null || size == null || info == null) alert

    PHP Code:
    <script type="text/javascript">

        function 
    replace_inner(w_titlesizeinfo)
        {
            if (
    w_title == null || size == null || info != nullalert ('w_title or size or info missing')
            else
            {
                
    with (document)
                {
                    
    worktitle.innerHTML    w_title;
                    
    dimensions.innerHTML    size;
                    
    about.innerHTML        info;
                }
            }
        }

    //called by

    replace_inner('w_title''size''info');

    </script> 
    hope that helps myfault:P

    also use replace_inner('w_title', 'size', 'info'); l;ike this


    <input type="button" onclick="replace_inner('w_title', 'size', 'info'); " />

    something like that, otherwise if you cant get it to work i will post it online for you

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's still beeping at me onload and onclick, although the other functions attached to that event (swap image) are now actually working.

    Here are some actual examples from the site:

    From...
    onclick="worktitle.innerHTML='04. Peripheral Visions #3'; dimensions.innerHTML='60 x 40 (inches)'; about.innerHTML='Pencil and acrylic on canvas.&lt;br /&gt;Series of studies on secondary structures within commonplace imagery.';"

    ...into...

    onclick="replace_inner('04. Peripheral Visions #3', '60 x 40 (inches)', 'Pencil and acrylic on canvas.&lt;br /&gt;Series of studies on secondary structures within commonplace imagery.');"

    As you can see I'm using html character number codes to enable line-breaks in the texts.
    I have tried creating the strings without using any 'line-breaks', so I doubt that this would be causing the problem.


    Sorry, if I'm being a real dim-wit with this.

    Your help is very much appreciated.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just tried connecting to a couple hosts and none of them are workin so i will post the code that does work

    PHP Code:
    <script type="text/javascript">

        function 
    replace_inner(w_titlesizeinfo)
        {
            if (
    w_title == null || size == null || info == nullalert ('w_title or size or info missing')
            else
            {
                
    with (document)
                {
                    
    worktitle.innerHTML    w_title;
                    
    dimensions.innerHTML    size;
                    
    about.innerHTML        info;
                }
            }
        }

    </script>

    work title = "<span name="worktitle"  id="worktitle"> </span>"<br />
    dimensions = "<span name="dimensions" id="dimensions"></span>"<br />
    about      = "<span name="about"      id="about">     </span>"<br />

    <input type="button" value="click here to replace" onclick="replace_inner('04. Peripheral Visions #3', '60 x 40 (inches)', 'Pencil and acrylic on canvas.&lt;br /&gt;Series of studies on secondary structures within commonplace imagery.');"> 
    this works as i just tested it.

    The reason you cannot get it to work is one of two things.

    [list=1][*]You have not used a name or id for your attribute to be replaced[*]you have put the javascript seperated on a seperate line where you can only do this in javascript by using '&' to concatenate the string or you will get an error saying string unterminated[/list=1]

    hope you get it working this time

  8. #8
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1) Each of the three texts to be replaced are surrounded by IDed <span> tags...
    <div id="descriptionbglayer" class="description0">
    <div id="description1layer" class="description1"><span class="bold" id="worktitle">--</span></div>
    <div id="description2layer" class="description2"><span id="dimensions">--</span></div>
    <div id="description3layer" class="description3"><span id="about">--</span></div>
    </div>


    2) Where should the...
    work title="<span name="worktitle" id="worktitle"></span>"<br />
    dimensions="<span name="dimensions" id="dimensions"></span>"<br />
    about="<span name="about" id="about">*</span>"<br />

    ...go?

    If I could see a working example I'm sure the fog would clear.

    For now, to be more organised, I have collected each of the sets into a function and I'm now calling the function on the event instead of the innerHTML instructions.
    I have placed them in a second external js file which I have linked to the main page.
    While this means I have more files, it also means I have reduced the clutter in the main page code.
    (It also means I can now use regular characters. The only reason I resorted to html character numbers is so the page would validate as XHTML with the strings still in.)

    I think I will now be seeking ways of doing externally (i.e. have any javascript wrapped in functions and only call the functions in the page itself)

    If you are able to show me how your method would work in this configuration I would be interested to see it.

    Thx agn
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  9. #9
    Currently Occupied; Till Sunda Andrew-J2000's Avatar
    Join Date
    Aug 2001
    Location
    London
    Posts
    2,475
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://andrew-j.port5.com/replace.html

    sry thats the example i just need to wake up to undestand what u meant by the above
    Last edited by Andrew-J2000; Apr 30, 2002 at 13:00.


Bookmarks

Posting Permissions

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