There are several problems here.
Function declaration within control structure
Function declarations (what you have there for your listEvents function) are invalid inside any control structure. They must appear at global scope or at the top level of function scope, not within a loop, a conditional, etc. Some engines tolerate them within those structures, guessing at what you mean, but others are more strict.
Function expressions, on the other hand, can appear anywhere any expression can appear. (It's still usually best not to put them in loops.)
You can tell the difference between a function declaration and a function expression quite simply: If you're immediately using the value of the construct, it's an expression.
Function declaration:
function foo() { /* ... */ }
Function expressions:
var f = function() { /* ... */ };
var nf = function foo() { /* ... */ }; // Avoid this on old versions of IE
doSomething(function() { /* ... */ });
Reusing the same function name
Your code is trying to set up loadEvents as a JSONP callback. You don't need to have multiple copies of loadEvents, you just need one — and because of the way JSONP works, it must be a global function.
Just ensure that the logic within loadEvents handles being called more than once, as each JSONP callback is triggered.
Overwriting m
You're overwriting the value of your m variable with the function. It's harmless the way you have it, but it's still a bad idea.
Using document.write
document.write has little-to-no place in modern web pages or web applications. Create a script node and append it to the DOM instead.
Using raw string values in URL query strings
Your code generating the script tag appends the content of the label to the query string without encoding it correctly. While that works with the specific values you have in your labels arrays now, if you change your label array values, it will break. Encode them instead, using encodeURIComponent.
Here's a minimal update:
var m, label, parent; // Declare variables!
label = ["Tutorials", "Widgets"];
parent = document.getElementsByTagName('script')[0].parentNode;
for (m = 0; m < label.length; m++) {
var script = document.createElement('script');
script.src = "http://www.allbloggertricks.com/feeds/posts/default/-/"
+ encodeURIComponent(label[m])
+ "?orderby=published&alt=json-in-script&callback=listEvents";
parent.appendChild(script);
}
function listEvents(json) {
var m;
var feed = json.feed;
for (var i = 0; i < 10; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
//Style
if (i == 0) {
x = "<span style='color:red'>Style 1 + Label 1</span><p>" + posttitle + "</p>";
p = "<span style='color:red'>Style 2 + Label 2</span><h4>" + posttitle + "</h4><p>";
}
if (i == 1) {
y = "<p>" + posttitle + "</p>";
g = "<h4>" + posttitle + "</h4></p>";
}
}
style = [x + y, p + g];
for (m = 0; m < style.length; m++) {
document.getElementsByClassName("agenda")[m].innerHTML = style[m];
}
}
Re your comment below:
But it still load only data from one "Label". I want with each style, it load a Label. Style1(normal text) load Label1(Tutorial), style2(bold text) load Label2(Widgets).
That's because your loadEvents overwrites the content of the agenda elements. Rather than having the agenda elements in the markup, you'd probably be better off adding them dynamically to some container. For instance:
<div id="agendas"></div>
Then change this:
for (m = 0; m < style.length; m++) {
document.getElementsByClassName("agenda")[m].innerHTML = style[m];
}
to this:
var agendas = document.getElementById("agendas");
for (m = 0; m < style.length; m++) {
var agenda = document.createElement('div');
agenda.className = "agenda"; // If you still need this for anything
agenda.innerHTML = style[m];
agendas.appendChild(agenda);
}
I recommend doing some reading on the DOM, and probably using a good library to make this stuff easier — jQuery, YUI, Closure, or any of several others.
