How can i call an external js using html link?

Question

Hi apparently when i create a function inside that scope it will not be visible outside that function. Is there another way to call resettimeline function without putting it outside the local scope? There are many other functions I need to call which is within the function ganttChart(config) and it is impossible to move them out of this function just to call them.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Gantt Chart</title>
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head>
<body>
  <div class="chart" id="Chart" style="width: 100%"></div>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
  <script type="text/javascript" src="ganttChart.js"></script>
  <script type="text/javascript" src="app.js"></script>
   <a id="myButton" href="javascript:void(0);" onclick="resettimeline()" >Click here</a>
  <br/>
  <a href="javascript:updateData()" >Update</a>

</body>
</html>

app.js

  var data = [
  {
    id: 1,
    title: "Request received", 
    action: 'from',
    user: 'SAS',
    start_date: "08/08/2016", 
    end_date: "10/08/2016",
    value: 67,
    // term: "Short Term",
    completion_percentage: 29,
    color: "#770051",
  }
];

ganttChart(config);

ganttChart.js

function ganttChart(config) {
.
.
.
. 
        function resettimeline() {
            document.location.reload();
        };
}

Does the ganttchart function return an object? Does that object expose these inner functions to you perhaps? We can't tell from this code. If it doesn't, then it's not intended that you run them yourself, they're clearly intended to be internal to the ganttchart functionality. — ADyson, Oct 03 '18 at 08:52
I got the ganttChart.js from here. https://bl.ocks.org/varun-raj/5d2caa6a9ad7de08bd5d86698e3a2403 — Roth, Oct 03 '18 at 08:56
ok well it seems the function doesn't return any kind of object which exposes an API. So it seems the writer of it didn't intend those functions to be public. — ADyson, Oct 03 '18 at 08:58
Mind you I also don't see any function called resettimeline(), as referred to in your question. — ADyson, Oct 03 '18 at 08:59

Brian Peacock · Accepted Answer · 2018-10-04T01:24:41.810

Though your question is not entirely clear, this sounds like a job for the Revealing Module Pattern, which is a common way to control Scope.

The principle is to employ an Immediately Invoked Function Expression (IIFE) which only exposes the parts of that function you need in the outer-scope.

The dummy-code below describes the principle...

/* a function calls itself */
var invokedFunction = (function() {

    /* scoped (private) variables */
    var someValue = 20;
    var someOtherValue = 0;

    /* scoped (private) method */
    function _someMethod1() {
        return someValue + someOtherValue;
    }

    /* scoped (public) method */
    function someMethod2(num) {
        /* some action or process */
        someOtherValue += num || 1;

        /* return private method1 */
        return _someMethod1();
    }

    /* expose public method2 */
    return {
        method: someMethod2
    };

}());

console.log( invokedFunction.method() ); // => 21
console.log( invokedFunction.method(4) ); // => 25

All the workings of invokedFunction() are scoped out of harms way except the someMethod2 function, which is exposed through invokedFunction's return value.

Further explanations can be found here:

Hope that helps :)

score 2 · Answer 2 · answered Oct 03 '18 at 09:21

let gc = gantChart(config);
gc.resettimeline(); // weeeee a loop!
.
.
function gantChart(config)
{
.
.
.
    return {resettimeline: resettimeline, gotonext: gotonext };
}

Just add all the functions you want to expose inside of the {} such as I did with resettimeline

How can i call an external js using html link?

2 Answers2