Looking to create a simple application, I encountered an issue with my if statement. I would greatly appreciate any help in identifying the problem.
The goal of the application is to provide users with a text box where they can input comma-separated items. If the number of items entered is 3 or fewer, a message should appear below the textbox saying "Enjoy!". For more than 3 items, the message should be "Too much!". To achieve this functionality, I utilized the split method. In case the textbox is empty and the user clicks the "Check If Too Much" button, a message stating "Please enter data first" should display.
Below is the code snippet:
(function () {
'use strict';
var app = angular.module('LunchCheck', []);
app.controller('LunchCheckController', LunchCheckController);
LunchCheckController.$inject = ['$scope'];
function LunchCheckController($scope) {
$scope.name;
$scope.message;
$scope.displayNumeric = function () {
console.log($scope.name);
console.log($scope.name.length);
var length = $scope.name.length;
console.log(length);
if (length == null) {
$scope.message = "Please enter data first";
}
else {
$scope.name = $scope.name.split(" ");
console.log($scope.name);
if ($scope.name.length = 3) {
$scope.message = "Enjoy!";
}
else {
$scope.message = "Too much!";
};
};
};
};
})();<!doctype html>
<html ng-app="LunchCheck">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="LunchCheckController">
<form>
<input type="text" ng-model="name" placeholder="Check it!" />
<button ng-click="displayNumeric()">Check If Too Much</button>
</form>
{{message}}
</div>
</body>
</html>