Solved

Simple Javascript question:

Posted on 2015-02-18
4
83 Views
Last Modified: 2015-02-18
Here is the entire code I have for my site:

 
<script defer="defer" src = "test.js">
console.log("Test 1");        
setOptions({
		UseFooter: true,
		UseHeader: true,
		Classification: "None",
		Style: "default.css"
	});
console.log("Test 2");
    </script>

Open in new window


Inside of "test.js" is just a simple "console.log("Test 3");" and a setOptions function that takes 1 variable.  In that function is a console.log("Test 4");

What I would EXPECT to happen:  

For the console to show :
Test 1
Test 2
Test 3
Test 4

(Or some variant of that in some order).  

Instead, all I get is "Test 3".  I assume I'm doing something wrong in the actual script code here.
0
Comment
Question by:Javin007
  • 2
  • 2
4 Comments
 
LVL 44

Expert Comment

by:Rainer Jeschor
ID: 40617636
Hi,
this will not work as the inline script will never get executed as you have both inline script and an external reference (src).
Just use this and it should work as expected:
<script defer="defer" src = "test.js"></script>
<script>
console.log("Test 1");        
setOptions({
		UseFooter: true,
		UseHeader: true,
		Classification: "None",
		Style: "default.css"
	});
console.log("Test 2");
    </script>

Open in new window

See also an explanation:
http://ejohn.org/blog/degrading-script-tags/

HTH
Rainer
0
 
LVL 4

Author Comment

by:Javin007
ID: 40617640
Yeah, I kinda figured that was the problem, so tried it your recommended way. Unfortunately, that way, it doesn't seem to recognize that "setOptions()" is an existing function (presumably because it hasn't actually loaded yet).  

What's the "correct" way to pass parameters to a Javascript plugin?
0
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 40617694
Hi,
simply remove the defer attribute, then this should work.
Normally you use events like body onload etc to execute Javascript after all resources have been loaded.
Personally I use the jQuery framework a lot as it encapsulates some of the important events.
<script src="test.js"></script>
<script>
console.log("Test 1");        
setOptions({
		UseFooter: true,
		UseHeader: true,
		Classification: "None",
		Style: "default.css"
	});
console.log("Test 2");
    </script>

Open in new window

HTH
Rainer
0
 
LVL 4

Author Closing Comment

by:Javin007
ID: 40617709
Ah, thanks!
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

786 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question