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
– ADyson, Commented Oct 3, 2018 at 8:52
I got the ganttChart.js from here. bl.ocks.org/varun-raj/5d2caa6a9ad7de08bd5d86698e3a2403 — Roth
– Roth, Commented Oct 3, 2018 at 8: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
– ADyson, Commented Oct 3, 2018 at 8:58
Mind you I also don't see any function called resettimeline(), as referred to in your question. — ADyson
– ADyson, Commented Oct 3, 2018 at 8:59

Brian Peacock · Accepted Answer · 2018-10-04 01:24:41Z

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 :)

Jgillett7674 · Accepted Answer · 2018-10-03 09:21:55Z

2

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

answered Oct 3, 2018 at 9:21

Jgillett7674

1124 bronze badges

Collectives™ on Stack Overflow

How can i call an external js using html link?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related