CODEWITHSUNDEEP
javascripthtmlangularjs
Chuen Yik Kang
Chuen Yik Kang

Reputation: 113

javascript not able to link with html

Good day everyone, currently my JavaScript is not able to link with my html.

My outcome should be something like this:

Correct ans

WTA: Is it fine that I put all the JavaScript using <script> </script> directly in the html code?

Tried it, but got this result:

javascript didnt fetch into the html code

Is there something wrong with including JS inline with the HTML like this?

<html>
<link rel="stylesheet" href="style.css">
<body>
<div class="container" ng-app="progressApp" ng-controller="progressBars">
    <h1>Angular.js Progress Bars</h1>
    <div class="fund" ng-repeat="give in fundData">
        <h2>Fund: {{give.fund}}</h2>
        <div class="progress">
            <div class="bar" ng-style="{width:{{((give.raised / give.goal) * 100)}} + '%'}">
                <!-- show calculated percentage if total amount raised is <= 100% -->
                <span class="percent" ng-show="((give.raised / give.goal) * 100) <= 100">{{((give.raised / give.goal) * 100) | number:0}}%</span>
                <!-- show maximum percentage if total amount raised is > 100% -->
                <span class="percent" ng-show="((give.raised / give.goal) * 100) > 100">100%</span>
            </div>
        </div>
        <span class="goal">Raised: {{give.raised | currency:"$":0}} &nbsp;&compfn;&nbsp; Goal: {{give.goal | currency:"$":0}}</span>
        <a class="donate" ng-href="{{give.link}}">Donate &raquo;</a>
    </div>
</div>
    
<script>
    var app = angular.module('progressApp', []);

app.controller('progressBars', ['$scope',
    function($scope) {
        $scope.fundData = [{
            "fund": "Mathematics",
            "goal": "250",
            "raised": "120",
            "link": "#general"
        }, {
            "fund": "Education",
            "goal": "5000",
            "raised": "1725",
            "link": "#education"
        }, {
            "fund": "Music",
            "goal": "3500",
            "raised": "4900",
            "link": "#music"
        }];
    }
]);</script>
</body>    
    </html>

I'm guessing my CSS works fine though. Thanks for helping.

Upvotes: 0

Views: 71

Answers (1)

Matias Demare
Matias Demare

Reputation: 43

Writing scripts inside your html file is fine (though a bit messy imo)

The problem here seems to be you didn't include the AngularJS library. Add a tag (the reference to the css should be there too), and in there include the AngularJS library. It should look something like this:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="lib/angular.min.js" type="text/javascript"></script>
  </head>
  <body>
    ...
  </body>
</html>

You may have to change the path to the library, depending on your project structure

Upvotes: 1

Related Questions