How can I make the following javascript function global?

Question

I have separated files for the HTML and JS code.. I want to make a function which allows me to change the image when I click on it with another (like an array of images(?)) the html-js link is done like this:

<script src="file.js"></script>

I want to be able to use the function like this:

<article>
  <h3>...</h3>
  <figure>
    <img src="images/image7.jpg" alt="path not found" class="dynamic-image" onclick="changeImg(1)">
    <figcaption></figcaption>
  </figure>
  <figure> 
    <img src="images/image10.jpg" alt="path not found" class="dynamic-image" onclick="changeImg(0)">
    <figcaption></figcaption>
  </figure>
</article>

so to be able to use onclick="changeImg(param)"... the JS code is like this:

window.onload = function() {function changeImg(param) {
//function changeImg(param) {
//  window.changeImg = function(param){
//The purpose of "use strict" is to indicate that the code should be executed in "strict mode".
// With strict mode, you can not, for example, use undeclared variables.
'use strict';

var preloads=[],c;

        //The preload function ensures that the images have all been loaded,
        // so that there’s no delay while the image is being loaded (as it’s already been preloaded) when the next image is used.
        function preload(){

        //arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
        for(c=0;c<arguments.length;c++) {
            preloads[preloads.length] = new Image();
            preloads[preloads.length-1].src = arguments[c];
        }
        c=0;

    }
        //cha hakyeon
        if (param == 0){
            preload('----src1---');
        }
        else if(param == 1){
            preload('----src2---');
        }

        //The last function occurs on the click event, which increases a counter and changes the image to the next image.
        document.getElementsByClassName('dynamic-image').addEventListener('click',
            function() {
                c++;
                if(c == preloads.length) {
                    c = 0;
                }
                this.src = preloads[c].src;
            });
    }
}(param);

Answer 1

You need to declare your changeImg function in the global scope.

Try this:

function changeImg(param) {
    //function changeImg(param) {
    //  window.changeImg = function(param){
    //The purpose of "use strict" is to indicate that the code should be executed in "strict mode".
    // With strict mode, you can not, for example, use undeclared variables.
    'use strict';

    var preloads = [], c;

    //The preload function ensures that the images have all been loaded,
    // so that there’s no delay while the image is being loaded (as it’s already been preloaded) when the next image is used.
    function preload() {

        //arguments is an Array-like object accessible inside functions that contains the values of the arguments passed to that function.
        for (c = 0; c < arguments.length; c++) {
            preloads[preloads.length] = new Image();
            preloads[preloads.length - 1].src = arguments[c];
        }
        c = 0;

    }
    //cha hakyeon
    if (param == 0) {
        preload('----src1---');
    }
    else if (param == 1) {
        preload('----src2---');
        }
    console.log(changeImg, window.changeImg);
    //The last function occurs on the click event, which increases a counter and changes the image to the next image.
    document.getElementsByClassName('dynamic-image').addEventListener('click',
        function () {
            c++;
            if (c == preloads.length) {
                c = 0;
            }
            this.src = preloads[c].src;
        });
}

ETA: This is the entire script, you don't need a window.onload assignment.

Also, you had a syntax error that was preventing the script from fully loading (which was what was preventing it from being globally accessible in my case)

It was on this line preload('----src2---'); (missing a single quote ')

Answer 2

Your function changeImg is defined inside the function window.onload, creating a closure. This means that the function changeImg is only available inside that function scope, we won't know what changeImg is outside of that function.

A quick way to resolve this would be to define the changeImg function outside the window.onload function.