How to call javascript function from html?

Question

I have following code:

<ion-content>
    <ion-list>
      <ion-item ng-repeat="x in names|orderBy:'order_id'">
        {{ x.order_id + ', ' + x.table_id+', '+x.name+', '+x.phone+', '+x.address+', '+x.remark+', '+myFunction(x.ctime)}}
      </ion-item>
    </ion-list>
  </ion-content>

I want to call myFunction and get the returned value, but it doesn't work.

<script type="text/javascript">
function myFunction(ctime) {
    alert("Hello World!");

    // create a new javascript Date object based on the timestamp
    // multiplied by 1000 so that the argument is in milliseconds, not seconds
    var date = new Date(ctime*1000);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = "0" + date.getMinutes();
    // seconds part from the timestamp
    var seconds = "0" + date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    console.log("debug",formattedTime);
    return formattedTime;
}

</script>

I wonder to know where the problem is. thanks.

Try <ion-item ng-repeat="x in names|orderBy:'order_id'" ng-init="myFunction(x.ctime)"> — Medet Tleukabiluly
– Medet Tleukabiluly, Commented Aug 24, 2015 at 6:40
do you use angular? how it doesn't work.? do you see any errors in browser console? — Grundy
– Grundy, Commented Aug 24, 2015 at 6:41
why you add code lines after return statement? this code never execute — Grundy
– Grundy, Commented Aug 24, 2015 at 6:47

Kamran Ahmed · Accepted Answer · 2015-08-24 07:04:46Z

The sequence of your script being attached in your page and your expression being evaluated might be the problem.

Anyways, making a global JavaScript function directly in the html file is not really recommended. You are using AngularJS, you can make the function available in the relevant scope, which will automatically handle this for you.

You must be having some controller where you declared your object array names, which must be looking something like:

myApp.controller('NamesCtrl', ['$scope', function($scope) {
  $scope.names = [{order_id: 1, table_id: 4, name: "Someone"}];
}]);

Just add your myFunction to the scope of the controller like:

myApp.controller('NamesCtrl', ['$scope', function($scope) {
  $scope.names = [{order_id: 1, table_id: 4, name: "Someone"}];

  $scope.myFunction = function myFunction(ctime) {
    alert("Hello World!");

    // create a new javascript Date object based on the timestamp
    // multiplied by 1000 so that the argument is in milliseconds, not seconds
    var date = new Date(ctime*1000);
    // hours part from the timestamp
    var hours = date.getHours();
    // minutes part from the timestamp
    var minutes = "0" + date.getMinutes();
    // seconds part from the timestamp
    var seconds = "0" + date.getSeconds();

    // will display time in 10:30:23 format
    var formattedTime = hours + ':' + minutes.substr(-2) + ':' + seconds.substr(-2);
    console.log("debug",formattedTime);
    return formattedTime;
  };
}]);

The expression through which you are calling the function needs no change.

If you want more details about this concept you may have a look here.

If you still choose to keep your script in the html page, you may try to include that script before the expression and check if it solves the issue.

If you still have any issues, feel free to comment.

thanks @Kamran Ahmed, I defined myFunction before I call it, I think the sequence is fine.
Why not in the scope of that object? Try doing that, it should surely fix it.
I'm new to angular and javascript, I don't know how to do in the scope of that object. Could you help to show me? thanks.

Collectives™ on Stack Overflow

How to call javascript function from html?

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related