CODEWITHSUNDEEP
javascriptangularjs
mcNuggetsplays
mcNuggetsplays

Reputation: 65

AngularJS functions

So I'm quiet new to Javascript and AngularJS and I'm trying to make a little game. After some time I managed to create some variables and display them in my html, but now I want to update these variables using the push of a button.

I searched the web and found out I could do this by using ng-click. My html file;

<!DOCTYPE html>
<html>
 <head>
    <script   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <div ng-app="myApp" ng-controller="gameController">
        <table style="width:400px">
            <tr>
                <td><div id = "00"></div></td>
                <td><div id = "01"></div></td>
                <td><div id = "02"></div></td>
                <td><div id = "03"></div></td>
                <td></td>
                <td rowspan = "5" id = "wordTable"></td>
            </tr>
            <tr>
                <td><div id = "10"></div></td>
                <td><div id = "11"></div></td>
                <td><div id = "12"></div></td>
                <td><div id = "13"></div></td>
            </tr>
            <tr>
                <td><div id = "20"></div></td>
                <td><div id = "21"></div></td>
                <td><div id = "22"></div></td>
                <td><div id = "23"></div></td>
            </tr>
            <tr>
                <td><div id = "30"></div></td>
                <td><div id = "31"></div></td>
                <td><div id = "32"></div></td>
                <td><div id = "33"></div></td>
            </tr>
            <tr>
                <td><button ng-click="startTimer()">Start Game</button></td>
                <td><button ng-click="addScore()">Submit</button></td>
                <td><span> {{count + " : Seconden"}}</span></td>
                <td><span> {{"Score: " + score}}</span></td>
            </tr>
        </table>
    </div>
</body>

script.js

var app = angular.module('myApp', []);
app.controller('gameController', function($scope) {

$scope.count= 180;
$scope.score= 0;

 $scope.addScore = function(){
    $scope.score++;
 };
 $scope.startTimer = function(){
    $scope.count--;
 };
});

For some reason this doesn't seem to work and I have been trying to find out why for the past 2 hours or so. The variables display as they should but the functions don't do anything.

And the stylesheet although I don't think that's the problem;

div {
 height:100px;
 width:100px;
 display: inline-block;
 background-color:#0000FF;
 border-radius: 5px;
}
.onclick {
 background-color:#E2BE22;
}
th,td {
 padding: 3px;
}
h1 {
 color: #FFFFFF;
 text-align: center;
 vertical-align: middle;
 line-height: 50px;   
}

I really hope someone can help me out here.

Upvotes: 0

Views: 66

Answers (3)

Suresh Muttagi
Suresh Muttagi

Reputation: 165

Actually you don't need any code in angular controller as you can achieve your requirements using "ng-init" and angular expressions. 

     <div ng-app="myApp" ng-init="count=180;score=0">

            //. your template 

            <td><span> {{count - 1 + " : Seconden"}}</span></td>
            <td><span> {{"Score: " + score + 1}}</span></td>

Upvotes: 0

michelem
michelem

Reputation: 14590

The code works but if you want to start a countdown you should change it with something like this:

JSFiddle

HTML:

<button ng-click="startTimer()" ng-disabled="scoreStart">Start Game</button>

JS:

$scope.scoreStart = false;

$scope.startTimer = function(){
    $scope.scoreStart = true;
    $interval(function () { $scope.count--; }, 1000);
};

Upvotes: 0

Moncef Hassein-bey
Moncef Hassein-bey

Reputation: 1361

It's working (run this snippet) ! 

<head>
    <script   src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script type="text/javascript">
      var app = angular.module('myApp', []);
      app.controller('gameController', function($scope) {

         $scope.count= 180;
        $scope.score= 0;

         $scope.addScore = function(){
         $scope.score++;
      };
        
     $scope.startTimer = function(){
         $scope.count--;
     };
});
    </script>
</head>
<body>
    <div ng-app="myApp" ng-controller="gameController">
        <table style="width:400px">
            <tr>
                <td><div id = "00"></div></td>
                <td><div id = "01"></div></td>
                <td><div id = "02"></div></td>
                <td><div id = "03"></div></td>
                <td></td>
                <td rowspan = "5" id = "wordTable"></td>
            </tr>
            <tr>
                <td><div id = "10"></div></td>
                <td><div id = "11"></div></td>
                <td><div id = "12"></div></td>
                <td><div id = "13"></div></td>
            </tr>
            <tr>
                <td><div id = "20"></div></td>
                <td><div id = "21"></div></td>
                <td><div id = "22"></div></td>
                <td><div id = "23"></div></td>
            </tr>
            <tr>
                <td><div id = "30"></div></td>
                <td><div id = "31"></div></td>
                <td><div id = "32"></div></td>
                <td><div id = "33"></div></td>
            </tr>
            <tr>
                <td><button ng-click="startTimer()">Start Game</button></td>
                <td><button ng-click="addScore()">Submit</button></td>
                <td><span> {{count + " : Seconden"}}</span></td>
                <td><span> {{"Score: " + score}}</span></td>
            </tr>
        </table>
    </div>

Upvotes: 1

Related Questions