Providing inputs to a JavaScript function, yet the function fails to execute properly

Question

Providing inputs to a JavaScript function, yet the function fails to execute properly

My JavaScript code detects the useragent for Android, iPhone, or iPod and loads specific JavaScript files accordingly. The code functions perfectly, but I noticed that having two 'createScript' functions with different names performing the same task is redundant. Therefore, I attempted to use a parameter/variable instead, but without success.

<script type="text/javascript">
    if(navigator.userAgent.match(/Android/i) ||
     navigator.userAgent.match(/webOS/i) ||
     navigator.userAgent.match(/iPhone/i) ||
     navigator.userAgent.match(/iPod/i)) {
        function addLoadEvent(func) {
        var oldonload = window.onload;
        if (typeof window.onload != 'function') {
                window.onload = func;
            } else {
             window.onload = function() {
                if (oldonload) {
                oldonload();
                }
                func();
                }
        }
        }

function createScript(scriptname) 
{ 
var oNode=document.createElement("script"); 
document.getElementsByTagName("body")[0].appendChild(oNode);

oNode.setAttribute("id", "newScript", 0); 
oNode.setAttribute("type", "text/javascript", 0); 
oNode.setAttribute("src", scriptname, 0); 
} 

createscriptlibrary = createScript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js");
createmyscript = createScript("nav.js");

addLoadEvent(createscriptlibrary);
addLoadEvent(createmyscript);
}
</script>

I've been attempting to modify the code above by using parameters in the 'createScript' function, but it's not functioning as intended:

<script type="text/javascript">
if(navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
    function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
            window.onload = func;
        } else {
         window.onload = function() {
            if (oldonload) {
            oldonload();
            }
            func();
            }
    }
    }


function createScript(scriptname) 
{ 
var oNode=document.createElement("script"); 
document.getElementsByTagName("body")[0].appendChild(oNode);

oNode.setAttribute("id", "newScript", 0); 
oNode.setAttribute("type", "text/javascript", 0); 
oNode.setAttribute("src", + scriptname + , 0); 
} 

createscriptlibrary = createScript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js");
createmyscript = createScript("nav.js");

addLoadEvent(createscriptlibrary);
addLoadEvent(createmyscript);
}
</script>

If possible, could someone assist me in resolving this issue? Thank you.

javascript css function arguments onload

Answer 1

Answer №1

The reason why that approach is ineffective is because the function createScript does not return a function as expected.

A straightforward solution would be to implement it like this:

addLoadEvent(function() { createscript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"); });
addLoadEvent(function() { createScript("nav.js"); });

It's important to note that assigning the same value for the id attribute in each script tag created by createScript is not allowed.

If you are in an ES5-supported environment, you could utilize Function#bind, but based on your question, it seems that relying on such an environment may not be feasible. Nevertheless, here is how you could do it:

addLoadEvent(createscript.bind(undefined, "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"));
addLoadEvent(createScript.bind(undefined, "nav.js"));

Alternatively, utilizing libraries like RequireJS would be a much simpler and efficient solution. :-)

By the way, your createScript function could be more concise (and the one mentioned in your query has a syntax error with the + before scriptName):

function createScript(scriptName) {
    var oNode = document.createElement('script');
    oNode.src = scriptName;
    document.body.appendChild(oNode);
}

No need to specify the type, and avoid setting the id unless each script has a corresponding identifier. Both src and type properties directly reflect, eliminating the necessity of using setAttribute.

Lastly, remember that your nav.js cannot assume jQuery is already loaded when scripts are loaded dynamically. Even if you prioritize adding the jQuery script first, dynamically added scripts might not be executed sequentially. Hence, include a safeguard in your nav.js code like this:

(function() {
    check();

    function check() {
        if (typeof jQuery === "undefined") {
            setTimeout(check, 50);
        }
        else {
            init();
        }
    }

    function init() {
    }
})();

This will verify the presence of jQuery and delay by 50ms if not found (you may want to set a timeout limit).

Answer 2

The reason why that approach is ineffective is because the function createScript does not return a function as expected.

A straightforward solution would be to implement it like this:

addLoadEvent(function() { createscript("https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"); });
addLoadEvent(function() { createScript("nav.js"); });

It's important to note that assigning the same value for the id attribute in each script tag created by createScript is not allowed.

If you are in an ES5-supported environment, you could utilize Function#bind, but based on your question, it seems that relying on such an environment may not be feasible. Nevertheless, here is how you could do it:

addLoadEvent(createscript.bind(undefined, "https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"));
addLoadEvent(createScript.bind(undefined, "nav.js"));

Alternatively, utilizing libraries like RequireJS would be a much simpler and efficient solution. :-)

By the way, your createScript function could be more concise (and the one mentioned in your query has a syntax error with the + before scriptName):

function createScript(scriptName) {
    var oNode = document.createElement('script');
    oNode.src = scriptName;
    document.body.appendChild(oNode);
}

No need to specify the type, and avoid setting the id unless each script has a corresponding identifier. Both src and type properties directly reflect, eliminating the necessity of using setAttribute.

Lastly, remember that your nav.js cannot assume jQuery is already loaded when scripts are loaded dynamically. Even if you prioritize adding the jQuery script first, dynamically added scripts might not be executed sequentially. Hence, include a safeguard in your nav.js code like this:

(function() {
    check();

    function check() {
        if (typeof jQuery === "undefined") {
            setTimeout(check, 50);
        }
        else {
            init();
        }
    }

    function init() {
    }
})();

This will verify the presence of jQuery and delay by 50ms if not found (you may want to set a timeout limit).

Answer 3

Answer №2

I recently made an update where I needed to dynamically add a CSS file. Instead of my original approach, I used the code below and it worked perfectly. Thank you!

<script type="text/javascript">
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'jqueryjava.css';
headID.appendChild(cssNode);
</script>

Answer 4

I recently made an update where I needed to dynamically add a CSS file. Instead of my original approach, I used the code below and it worked perfectly. Thank you!

<script type="text/javascript">
var headID = document.getElementsByTagName("head")[0];         
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'jqueryjava.css';
headID.appendChild(cssNode);
</script>

Providing inputs to a JavaScript function, yet the function fails to execute properly

Answer №1

Answer №2

Similar questions

jQuery - Creating an organized hierarchy list

Create a new column in Material UI Grid by adding an empty div element instead of using padding

Learn the process of marking an option as selected within an Angular component

innovative jquery table creator

Issues encountered with the functionality of face-api and tensorflow.js within the browser

Missing Component when Nested within Route in React Router v6

What are the best practices for utilizing an array of routes?

Fetching basic information from an API using Ember.js

Automatically storing modified text from richtextbox into the database for safekeeping

Jquery's remove function fails to function correctly when used on a cloned element

Tips for setting up a typeorm entity with attention to its nullable fields

Exploring the power of promise chaining within AWS Lambda

Struggling with the alignment of divs in a vertical manner

What is the process for extracting the background color from a typescript file in Angular and connecting it to my HTML document?

The webpage appears to be stuck and unresponsive to scrolling

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

Utilize Rails file_field input as a clickable button

Encountering an error while configuring app.js with git bash

Columns that can be resized in a right-to-left (

Tried utilizing express to log URL parameters, but to no avail as it did not show any output on the console