www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Global Variable?

Hybrid View

  1. #1
    Join Date
    Mar 2012
    Posts
    2

    resolved [RESOLVED] Global Variable?

    Okay, I've been trying to test something new, as a feature to implement into my site. I can't seem to find out what is wrong. I want a feature called by an onclick event, that on each click, will cycle through a list.
    Here's the test code I've tried with.
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var a = 0;
    function test() {
    	var p = document.getElementById("test");
    	var type = ["<a href='http://www.yahoo.com'>Link to Yahoo</a>","<a href='http://www.google.com'>Link to google</a>"];
    	p.innerHTML = type[a];
    	var b = a + 1;
    	var a = b;
    }
    </script>
    </head>
    <body>
    <button onclick="test()">Click here</button>
    <p id="test">Starting text</p>
    </body>
    </html>
    Each individual event works properly, but the overall function doesn't. Once reaching the function test(), the variable "a" is no longer assigned, and it prints "undefined" in the paragraph tag, since type[], has a selector value that is null. It cannot be included in the function itself, because it would be reassigned to, say 0 in this case, at the start of the function, and would not perform as intended. What I'm looking for this to do, is to pretty much count by adding 1 at each button press, and proceed to show a piece of HTML printed from the array. I could simply use a "if p = test[1], elseif p = test[2]... but that is somewhat impractical, to implement several dozen if/else statements. The strangest thing is that even with setting a global variable, the function doesn't seem to pull it in.
    I normally test by placing intermittent alert(-variable-); in the code, to interrupt the code momentarily and state what the variable is set to, to help find out what happens, and it seems that when the function starts, it forgets the variable of "a".

    Anyone have any idea what I am doing wrong?

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,662
    Code:
    <html>
    <head>
    <script type="text/javascript">
    var a = 0;
    function test() {
    	var p = document.getElementById("test");
    	var type = ["<a href='http://www.yahoo.com'>Link to Yahoo</a>","<a href='http://www.google.com'>Link to google</a>"];
    	p.innerHTML = type[a%2];
    	a++;
    }
    </script>
    </head>
    <body>
    <button onclick="test()">Click here</button>
    <p id="test">Starting text</p>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Aug 2007
    Posts
    3,767
    The reason your code doesn't work, is because you used var when assigning a inside the function. A possibly nicer solution would be this:
    Code:
    var whatever = function(id, lks) {
      var p = document.getElementById(id), a = 0;
      p.onclick = function() {
        p.innerHTML = lks[a++&#37;lks.length];
      };
    };
    Set it up as on page load as:
    Code:
    whatever("test",["Yahoo link","Google link"]);
    Last edited by Declan1991; 03-31-2012 at 05:34 AM. Reason: Typo
    Great wit and madness are near allied, and fine a line their bounds divide.

  4. #4
    Join Date
    Mar 2012
    Posts
    2
    Thank you for that. With both of your help I have figured out what the issue was, and how to solve it. Declan, I understand where you're heading, but I have positioned everything in the test page, for organization purposes. But thank you vwphillips for the code, and Declan for explaining what it was I was doing wrong, and why vwphillips' response worked differently than mine.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles