AngularJS functions

Question

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.

Is the function not running at all or is your variable not updating when it runs? — Chrillewoodz
– Chrillewoodz, Commented Sep 13, 2015 at 15:03
It works: jsfiddle.net/michelem09/x8Lanhrk Check your debug console for errors — michelem
– michelem, Commented Sep 13, 2015 at 15:05

Moncef Hassein-bey · Accepted Answer · 2015-09-13 15:08:01Z

1

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>

answered Sep 13, 2015 at 15:08

Moncef Hassein-bey

1,3619 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mcNuggetsplays Over a year ago

Thanks, you are right it's working. Turns out the stylesheet messes the whole thing up for some odd reason:S

mcNuggetsplays Over a year ago

Found out what was wrong, applied the css to all divs but I forgot I made a new one at top level.

michelem · Accepted Answer · 2015-09-13 15:11:19Z

0

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);
};

answered Sep 13, 2015 at 15:11

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Comments

Suresh Muttagi · Accepted Answer · 2015-09-13 18:05:41Z

0

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>

answered Sep 13, 2015 at 18:05

Suresh Muttagi

1651 silver badge7 bronze badges

Collectives™ on Stack Overflow

AngularJS functions

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related