SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Function to display element - syntax error

    I think I have a syntax issue that is preventing my code from running as it should.

    All I want to do is call a function from an input button that displays a hidden <li>.

    Here is the HTML.
    Code:
    <ol><li id="example1" style="display:block;">
                        <input type="text" /><input type="button" onClick="show('example')" value="Add" />
                        </li>
    <li id="example2" style="display:block;">
                        <input type="text" /><input type="button" onClick="show('example')" value="Add" />
                        </li></ol>
    Here is the JS.
    Code:
    var examplecounter = 2;
      function show(element)
      {
          document.getElementById(element+element+counter).style.display = "block";
    	  elementcounter +=1;
      }
    Below I have replaced the function argument with the actual value of the argument to show how I need the code to process:
    Code:
    var examplecounter = 1;
      function show(example)
      {
          document.getElementById(example1).style.display = "block";
    	  examplecounter +=1;
      }
    Can anybody advise? Many Thanks.

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shouldn't this:

    Code JavaScript:
    document.getElementById(element+element+counter)

    be this:

    Code JavaScript:
    document.getElementById(element+counter)

    ?
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    Shouldn't this:

    Code JavaScript:
    document.getElementById(element+element+counter)

    be this:

    Code JavaScript:
    document.getElementById(element+counter)

    ?
    I don't think so.

    The element has an ID of "example2" and the variable "examplecounter" = 2.

    So if I pass the argument "example" to the function, how do I concatenate it with the value of examplecounter to return:

    Code JavaScript:
    document.getElementById(example2)

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How about this:
    document.getElementById(element+examplecounter)
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post
    How about this:
    document.getElementById(element+examplecounter)
    That works but only for this instance where "element" = "example":

    Code:
    var examplecounter = 2;
    var samplecounter = 2;
    
      function show(element)
      {
          document.getElementById(element+element+counter).style.display = "block";
    	  elementcounter +=1;
      }
    If "element" = "sample", the variable "samplecounter" should be called.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm not sure I explained my problem very well.

    So, I'll try again.

    I have a function that is passed the argument "example".

    Below shows how I want the script to process with "example" taking it's value from the argument and "1" taking it's value from "examplecounter".

    Code:
    var examplecounter = 1;
      function show(example)
      {
          document.getElementById(example1).style.display = "block";
    	  examplecounter +=1;
      }
    The problem is I am unsure of the syntax I need to produce this result, particularly concatenating the two values to produce "example1".

    I hope that is clear. Any help is appreciated.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Instead of using examplecounter and samplecounter, you could instead use an object.

    Code javascript:
    var counter = {};
    counter.example = 1;
    counter.sample = 1;

    You can use an array index to access these variables.

    Code javascript:
    var counter = {};
    counter.example = 1;
    counter.sample = 1;
    function show(id)
    {
        document.getElementById(id + counter[id]).style.display = "block";
        counter[id] +=1;
    }

    When id is "example" it'll use counter.example
    When id is "sample" it'll use counter.sample
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    32
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    Instead of using examplecounter and samplecounter, you could instead use an object.

    Code javascript:
    var counter = {};
    counter.example = 1;
    counter.sample = 1;

    You can use an array index to access these variables.

    Code javascript:
    var counter = {};
    counter.example = 1;
    counter.sample = 1;
    function show(id)
    {
        document.getElementById(id + counter[id]).style.display = "block";
        counter[id] +=1;
    }

    When id is "example" it'll use counter.example
    When id is "sample" it'll use counter.sample
    Aha!

    Thank you Paul - that should do the trick.


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
  •