I have an function with json data inside an variable. Inside that function I use those data to display them on a div. But when I place that code inside html document using my code it works without onload event or another but what I want is for example to put these code in an external .js file and put them together as a function and to call it whenever I want from the html document using onclick event for example.
This is my code but when I write at onclick="takvimi()" it does nothing. That external js file its called in the part so I don't know why its not working.
function takvimi(){
var data= {
"Shkup":[
{
"Dita": "1",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "2",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "3",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "4",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "5",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "6",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "7",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "8",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "9",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "10",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "11",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "12",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "13",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "14",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "15",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "16",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "17",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "18",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "19",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "20",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "21",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "22",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "23",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "24",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "25",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "26",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "27",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "28",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "29",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
{
"Dita": "30",
"Data":"17-kor-15",
"Imsaku": "05.50",
"Iftari": "18.31"
},
]}
<!-- Takvimi per Shkup -->
var outputSK ='<ul style="padding:0px 15px;color:#fff ;text-shadow: none;font-family: Dosis;font-size:medium; font-weight: normal;" >';
for (var i in data.Shkup)
{
outputSK+='<li>Dita: ' + data.Shkup[i].Dita + ' Ramazan <span style="float:right">Data: '+ data.Shkup[i].Data + '</span><br>';
outputSK+='Imsaku: ' + data.Shkup[i].Imsaku + '<span style="float:right">Iftari: '+ data.Shkup[i].Iftari + '</span></li>';
}
outputSK+= '</ul>';
document.getElementById("takvimi-Shkup").innerHTML = outputSK;
}
The reason is because the json data are much more than this ones and I want to get cleaner and smaller html document size.
UPDATE: My html code is here http://pastebin.com/tkdhhg8g
page with id #takvim is where I want to display the data..
js/mysript.js is the while which contains the function takvimi()
color: #fff(white), so it isn't visible here: jsfiddle.net/47txk8a2