zahra khalafi zahra khalafi - 1 month ago 11
AngularJS Question

TypeError: event.attribute is not a function at a.$$ChildScope.$$ChildScope.$scope.Increment1 in angularjs

I'm a beginner at

angular.js

I got this error:


TypeError: event.attribute is not a function at a.$$ChildScope.$$ChildScope.$scope.Increment1


full error output in my browser chrome console:

> angular.js:11607 TypeError: event.attribute is not a function
> at a.$$ChildScope.$$ChildScope.$scope.Increment1 (http://localhost:63342/New%20folder%20(2)/index1.html:33:27)
> at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:198:303
> at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:214:485)
> at a.$$ChildScope.$$ChildScope.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:125:305)
> at a.$$ChildScope.$$ChildScope.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:126:6)
> at HTMLDivElement.<anonymous> (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:215:36)
> at HTMLDivElement.c (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js:32:389)


my codes:

<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>

<div ng-app="app" ng-controller="ClickController">
<div id="bigdiv">
<div id="div1" data-id="on" ng-click="Increment1($event)"></div>
<div id="div2" data-id="on" ng-click="Increment1($event)"></div>
<div id="div3" data-id="on" ng-click="Increment1($event)"></div>
<br/>
<div id="div4" data-id="on" ng-click="Increment1($event)"></div>
<div id="div5" data-id="on" ng-click="Increment1($event)"></div>
<div id="div6" data-id="on" ng-click="Increment1($event)"></div>
<br/>
<div id="div7" data-id="on" ng-click="Increment1($event)"></div>
<div id="div8" data-id="on" ng-click="Increment1($event)"></div>
<div id="div9" data-id="on" ng-click="Increment1($event)"></div>
</div>
<!--<button ng-click="start()">start</button>-->
<input id="input1">
</div>
<script>
var count=0;var m=0;var m1=0;
var app = angular.module("app", []);
app.controller("ClickController", function ($scope) {
$scope.Increment1 = function (event) {
var id=event.target.id;
var cc= event.attribute("data-id");
alert(cc);
if(count%2==0 ){

document.getElementById(id).style.backgroundColor = "blue";
document.getElementById("input1").value ="blue";
count++;
m=1;
}
else if (count%2==1 ){
document.getElementById(id).style.backgroundColor = "red";
document.getElementById("input1").value ="red";
count++;
m1=1;

}
}
});
</script>
</body>
</html>

Answer Source

Instead of using

var cc= event.attribute("data-id");

Just use

var cc= event.target.attribute("data-id");