SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    A variable is not defined

    When I run the following script, console reports an error in the last line saying that "colors" is not defined. I thought I defined it (an array) at the beginning of the script, so why is it not defined at the end while still in the script?

    Code:
    <script>
    (function sampleArray() {
    	"use strict";
     
    	var colors = [],
    		form = document.getElementById('formColor');
     
    	form.addEventListener("submit", function(e) {
    	        e.preventDefault(); // prevents the form from submitting
    		var newColor = formColor.newColorInput.value;
    		colors.push(newColor);
    		console.log ("new color = " + newColor);
    		console.log (colors.join(', '));
    	}, false);
    })();
    // colors is not defined:
    document.getElementById('arrayStuff').innerHTML += "<em>Colors = " + colors.join(", ") + "</em>"; 
    </script>
    </body>
    Steve Husting

  2. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It looks like if I moved the var colors =[], and the next line to before the function, it becomes global, and the error goes away. However, I still don't see the div innerHTML being populated.
    Steve Husting

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,810
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Code:
    <script>
    (function sampleArray() {
    	"use strict";
     
    	var colors = [],
    		form = document.getElementById('formColor');
     
    	form.addEventListener("submit", function(e) {
    	        e.preventDefault(); // prevents the form from submitting
    		var newColor = formColor.newColorInput.value;
    		colors.push(newColor);
    		console.log ("new color = " + newColor);
    		console.log (colors.join(', '));
    	}, false);
    })();
    // END OF FUNCTION - NOTHING DEFINED IN THE FUNCTION EXISTS ANY MORE
    // colors is not defined:
    document.getElementById('arrayStuff').innerHTML += "<em>Colors = " + colors.join(", ") + "</em>"; 
    </script>
    </body>
    May be you need to move the assignment inside the function
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,340
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I put it right after "}, false);" and it did not work. I put it before that and now it works!

    Thanks for your direction!
    Steve Husting


Tags for this Thread

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
  •