Inner HTML doesn't work, Please help

HTML

<script src="script.js"></script>
    <div id="output">
    </div>

JS


var students =[
    {name:"Mr A",
    track:"android development"
    ,achievement:510
    ,points_earned:53000
    },
    {name:"Mr B",
    track:"ios development"
    ,achievement:150
    ,points_earned:50003
    },
    {name:"Mr C"
    ,track:"Python development"
    ,achievement:350,
    points_earned:50040
    },
    {name:"Mr D",
    track:"Frontend development"
    ,achievement:250
    ,points_earned:50800
    },
    {name:"Mr E"
    ,track:"Backend development"
    ,achievement:50
    ,points_earned:50700
    }
];


var message = "";
var student;

for (var i =0; i<students.length;i++){
    student = students[i];
    message += '<h2>'+'Student name is '+ students[i].name +'</h2>'

}

function print(message){
var outputDiv = document.getElementById("output");
 outputDiv.innerHTML = message;


}

print(message);

/*whereas document.write works well*/