CODEWITHSUNDEEP
javascriptif-statement
Shafique
Shafique

Reputation: 1826

JavaScript IF/ELSE to call another JS Script?

I need to call one of two JavaScripts depending on a condition, like so:

<script type="text/javascript">
if(b_condition)
  <script type="text/javascript" src="http://script1.js"></script>
else
  <script type="text/javascript" src="http://script2.js"></script>
</script>

But this doesnt work. Any ideas how to call another JavaScript call in an If/Else block?

Upvotes: 9

Views: 27958

Answers (10)

pruthwiraj.kadam
pruthwiraj.kadam

Reputation: 1093

   <script type="text/javascript">     
    if(condition==true)
    {
        var src = "js/testing_true.js";
        var newScript = document.createElement("script");
        newScript.type = "text/javascript";
        newScript.setAttribute("async", "true");
        newScript.setAttribute("src", src);
        document.body.appendChild(newScript);
    }else
    {

        var src = "js/testing_false.js";
        var newScript = document.createElement("script");
        newScript.type = "text/javascript";
        newScript.setAttribute("async", "true");
        newScript.setAttribute("src", src);
        document.body.appendChild(newScript);
    }
</script>

Upvotes: 1

Soccerwidow
Soccerwidow

Reputation: 41

<?php if (a_condition) {?>
put html code here or script or whatever you like
<?php } elseif(b_condition) {?>
put any other code here 
<?php } else {?>
put even more code
<?php } ?>

Upvotes: -3

Shafique
Shafique

Reputation: 1826

I used this and it works well:

<script type="text/javascript">
if(b_condition)
  document.write('<scri'+'pt src="http://script1.js"></'+'script>');
else
  document.write('<scri'+'pt src="http://scripts2.js"></'+'script>');
</script>

I see that document.write is not the best practice to use though, but it works. Any ideas better than this? I don't want to write so much code for something so simple.

Upvotes: 1

Ryan McGrath
Ryan McGrath

Reputation: 2042

What the hell? Why on earth is everyone here advocating document.write()? Fairly certain we've moved beyond this as standard practice by this point; document.write isn't even valid if you're in an XHTML setting.

The best way to do this would be something like the following (also here, for better highlighting/parsing: https://gist.github.com/767131):

/*  Since script loading is dynamic/async, we take
    a callback function with our loadScript call
    that executes once the script is done downloading/parsing
    on the page.
*/
var loadScript = function(src, callbackfn) {
    var newScript = document.createElement("script");
    newScript.type = "text/javascript";
    newScript.setAttribute("async", "true");
    newScript.setAttribute("src", src);

    if(newScript.readyState) {
        newScript.onreadystatechange = function() {
            if(/loaded|complete/.test(newScript.readyState)) callbackfn();
        }
    } else {
        newScript.addEventListener("load", callbackfn, false);
    }

    document.documentElement.firstChild.appendChild(newScript);
}

if(a) {
    loadScript("lulz.js", function() { ... });
} else {
    loadScript("other_lulz.js", function() { ... });
}

If you have jQuery or a similar library on the page, you can jack out my loadScript function and insert their appropriate function (ala $.getScript, etc).

Upvotes: 17

Wolph
Wolph

Reputation: 80111

This is usually a bad idea so I recommend that you tell us what you actually need to do so we can find a better solution for you. In general you would like to combine and minify all javascript needed on the page so the user only has to load it once.

If there is no other way than you can do it like this:

<script type="text/javascript">
    var script = document.createElement('script');
    if((b_condition){
        script.src = 'script1.js';
    }else{
        script.src = 'script1.js';
    }
    document.body.appendChild(script);
</script>

Upvotes: 0

Arthur Neves
Arthur Neves

Reputation: 12148

Those files script1.js and script2.js are your, or are u including them from another domain?

because if they are yours your can include both, and depends of your condition you can call functions inside the files..

Upvotes: 0

moribvndvs
moribvndvs

Reputation: 42495

You need to either emit the desired script block in your condition, or create the script tag using the DOM and insert it. http://ajaxpatterns.org/On-Demand_Javascript

Upvotes: 0

spinon
spinon

Reputation: 10857

You could do something like this:

var file=document.createElement('script')
file.setAttribute("type","text/javascript")
file.setAttribute("src", "script1.js")

Forgot to add that you need to then append this into an element on the page:

document.getElementsByTagName("head")[0].appendChild(file)

Upvotes: 3

Felix Kling
Felix Kling

Reputation: 817208

If the scripts are not huge and/or there is no other reason why not both should be loaded, I would do something like:

<script type="text/javascript" src="http://script1+2.js"></script>
<script type="text/javascript">
    if(b_condition) {
        functionA();
    } 
    else {
        functionB();
    }
</script>

Upvotes: 0

alexwen
alexwen

Reputation: 1128

<script type="text/javascript">
   if(b_condition)
      document.write('<script type="text/javascript" src="http://script1.js"></script>');
   else
      document.write('<script type="text/javascript" src="http://script2.js"></script>');
</script>

Upvotes: -2

Related Questions