Reputation: 81

JavaScript Multiple Functions in HTML

I have a javascript file that has two functions that operate similarily to each other but with different values.

These functions are exceuted via a form within HTML

The first form executes properly, but the second form will not display properly. Am I executing or calling the second function improperly?

What can be done to have it execute properly, similarily to the first function?

JavaScript code:

<script>

 function OrderFormController($scope){

// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.

$scope.services = [
    {
        name: '12 Semester Hours (+ Fees)',
        price: 3031,
        fee: 1031,
        active:false
    },{
        name: 'Residence Hall',
        price: 2620,
        fee: 0,
        active:false

    },{
        name: 'Meal Plan',
        price: 1970,
        fee: 0,
        active:false
    },{
        name: 'Parking Permit',
        price: 180,
        fee: 0,
        active:false
    }
];

$scope.toggleActive = function(s){
    s.active = !s.active;
};

// Helper method for calculating the total price

$scope.total = function(){

    var total = 0;

    // Use the angular forEach helper method to
    // loop through the services array:

    angular.forEach($scope.services, function(s){
        if (s.active){
            total+= s.price + s.fee;
        }
    });

    return total;
   };
 }
 function tutionFormController($scope){

// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.

$scope.things = [
    {
        name: '12 Semester Hours (+ Fees)',
        price: 3000,
        fee: 2031,
        active:false
    },{
        name: 'Tchnology Fee',
        price: 800,
        fee: 0,
        active:false

    },{
        name: 'Distance Fee',
        price: 900,
        fee: 0,
        active:false
    }
];

$scope.toggleActive = function(t){
    t.active = !t.active;
};

// Helper method for calculating the total price

$scope.total = function(){

    var total = 0;

    // Use the angular forEach helper method to
    // loop through the things array:

    angular.forEach($scope.things, function(t){
        if (t.active){
            total+= t.price + t.fee;
        }
      });

       return total;
     };
   }
 </script>

HTML code:

<div>

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">





   <h1>Tutition Estimate Calculator</h1>

   <div class="tab" style="text-align: right;">
    <button class="tablinks" onclick="openStudent(event, 'tabOne')" id="defaultOpen">Face to Face</button>
    <button class="tablinks" onclick="openStudent(event, 'tabTwo')">Online</button>
  </div>

  <div id="tabOne" class="tabcontent">

        <form ng-app ng-controller="OrderFormController">  
        <h2>Face to Face</h2>
          <ul>
  <!-- Loop through the services array, assign a click handler, and set or
  remove the "active" css class if needed -->
            <li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
  <!-- Notice the use of the currency filter, it will format the price -->
             {{service.name}} <span>{{service.price + service.fee | currency}}</span>
            </li>
           </ul>

         <div class="total">
              <!-- Calculate the total price of all chosen services. Format it as currency. -->
            Total: <span>{{total() | currency}}</span>
         </div>

      </form>

  </div>

    <div id="tabTwo" class="tabcontent">

      <form ng-app ng-controller="tutionFormController">  
        <h2>Online</h2>
          <ul>
  <!-- Loop through the things array, assign a click handler, and set or
  remove the "active" css class if needed -->
            <li ng-repeat="thing in things" ng-click="toggleActive(thing)" ng-class="{active:thing.active}">
  <!-- Notice the use of the currency filter, it will format the price -->
             {{thing.name}} <span>{{thing.price + thing.fee | currency}}</span>
            </li>
           </ul>

         <div class="total">
<!-- Calculate the total price of all chosen things. Format it as currency. -->
            Total: <span>{{total() | currency}}</span>
         </div>

      </form>

  </div>    



</div>

NOTE: There is some additional code within the HTML for tabs, this works but is not relevant for the issue present. I just want the second form / function to work properly, like the one before it.

Upvotes: 0

Answers (1)

Kalaikumar Thangasamy

Reputation: 564

You are using ng-app in two please but your not specify the APP name name. Here I have removed ng-app and added in the top most div.

<div ng-app>

 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css"> 
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">





   <h1>Tutition Estimate Calculator</h1>

   <div class="tab" style="text-align: right;">
    <button class="tablinks" onclick="openStudent(event, 'tabOne')" id="defaultOpen">Face to Face</button>
    <button class="tablinks" onclick="openStudent(event, 'tabTwo')">Online</button>
  </div>

  <div id="tabOne" class="tabcontent">

        <form ng-controller="OrderFormController">  
        <h2>Face to Face</h2>
          <ul>
  <!-- Loop through the services array, assign a click handler, and set or
  remove the "active" css class if needed -->
            <li ng-repeat="service in services" ng-click="toggleActive(service)" ng-class="{active:service.active}">
  <!-- Notice the use of the currency filter, it will format the price -->
             {{service.name}} <span>{{service.price + service.fee | currency}}</span>
            </li>
           </ul>

         <div class="total">
              <!-- Calculate the total price of all chosen services. Format it as currency. -->
            Total: <span>{{total() | currency}}</span>
         </div>

      </form>

  </div>

    <div id="tabTwo" class="tabcontent">

      <form ng-controller="tutionFormController">  
        <h2>Online</h2>
          <ul>
  <!-- Loop through the things array, assign a click handler, and set or
  remove the "active" css class if needed -->
            <li ng-repeat="thing in things" ng-click="toggleActive(thing)" ng-class="{active:thing.active}">
  <!-- Notice the use of the currency filter, it will format the price -->
             {{thing.name}} <span>{{thing.price + thing.fee | currency}}</span>
            </li>
           </ul>

         <div class="total">
<!-- Calculate the total price of all chosen things. Format it as currency. -->
            Total: <span>{{total() | currency}}</span>
         </div>

      </form>

  </div>    

</div>
<script>

 function OrderFormController($scope){

// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.

$scope.services = [
    {
        name: '12 Semester Hours (+ Fees)',
        price: 3031,
        fee: 1031,
        active:false
    },{
        name: 'Residence Hall',
        price: 2620,
        fee: 0,
        active:false

    },{
        name: 'Meal Plan',
        price: 1970,
        fee: 0,
        active:false
    },{
        name: 'Parking Permit',
        price: 180,
        fee: 0,
        active:false
    }
];

$scope.toggleActive = function(s){
    s.active = !s.active;
};

// Helper method for calculating the total price

$scope.total = function(){

    var total = 0;

    // Use the angular forEach helper method to
    // loop through the services array:

    angular.forEach($scope.services, function(s){
        if (s.active){
            total+= s.price + s.fee;
        }
    });

    return total;
   };
 }
 function tutionFormController($scope){

// Define the model properties. The view will loop
// through the services array and genreate a li
// element for every one of its items.

$scope.things = [
    {
        name: '12 Semester Hours (+ Fees)',
        price: 3000,
        fee: 2031,
        active:false
    },{
        name: 'Tchnology Fee',
        price: 800,
        fee: 0,
        active:false

    },{
        name: 'Distance Fee',
        price: 900,
        fee: 0,
        active:false
    }
];

$scope.toggleActive = function(t){
    t.active = !t.active;
};

// Helper method for calculating the total price

$scope.total = function(){

    var total = 0;

    // Use the angular forEach helper method to
    // loop through the things array:

    angular.forEach($scope.things, function(t){
        if (t.active){
            total+= t.price + t.fee;
        }
      });

       return total;
     };
   }
 </script>

Here is the example to create multiple APP.

var app = angular.module("myApp", []);
app.controller("OrderFormController", function($scope) {
    .....
    .....
});

var app1 = angular.module("myApp1", []);
app1.controller("tutionFormController", function($scope) {
    .....
    .....
});

Upvotes: 1

JavaScript Multiple Functions in HTML

Answers (1)

Related Questions