Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Smile Help! I need help with running an external ".js" file from a link.

    Hello, how could I run an external (but still on the same server) ".js" file from a <a href> or a button? Is it possible and how? Thanks.

    If you need any details just ask.
    Last edited by MancunianMacca; 03-01-2012 at 08:00 PM. Reason: Resolved

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,245
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    I don't understand what you mean. You must load the .js file into your browser before it can execute. You can cause it to execute onclick using either a link or a button.

    It is possible to do this to load a script dynamically:-

    Code:
    <script type="text/javascript">
    
    var js=document.createElement('SCRIPT');
    js.type="text/javascript";
    js.src= "myscript.js";
    document.getElementsByTagName('HEAD')[0].appendChild(js);
    
    </script>

    Quizmaster: In nature, what invertebrate has a name which literally means "one hundred feet"?
    Contestant: Giraffe

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    MancunianMacca (03-01-2012)

  • #3
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Oh so I make it a variable first? I'll test this to see if it's what I wanted it for. Thanks

  • #4
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    ------
    Last edited by MancunianMacca; 02-29-2012 at 08:10 PM.

  • #5
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    I don't understand what you mean. You must load the .js file into your browser before it can execute. You can cause it to execute onclick using either a link or a button.

    It is possible to do this to load a script dynamically:-

    Code:
    <script type="text/javascript">
    
    var js=document.createElement('SCRIPT');
    js.type="text/javascript";
    js.src= "myscript.js";
    document.getElementsByTagName('HEAD')[0].appendChild(js);
    
    </script>

    Quizmaster: In nature, what invertebrate has a name which literally means "one hundred feet"?
    Contestant: Giraffe
    No this is not what I mean. I have a script in a directory called "JavaScript" and I want this to run when a user clicks a link or a button.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,245
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    Well, load the script into the browser in the usual way,
    <script type = "text/javascript" src = "/Javascript/myJavaScriptfile.js"></script>

    then execute it as needed with

    <input type = button" onclick = "runMyJavascript()">
    where runMyJavascript() is a function loaded from an external file, that is the content of myJavascriptFile.js.

    function runMyJavascript() {
    alert ("Hello World!");
    }
    Last edited by Philip M; 02-29-2012 at 08:24 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    MancunianMacca (03-01-2012)

  • #7
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    Well, load the script into the browser in the usual way,
    <script type = "text/javascript" src = "/Javascript/myJavaScriptfile.js"></script>

    then execute it as needed with

    <input type = button" onclick = "runMyJavascript()">
    where runMyJavascript() is a function loaded from an external file, that is the content of myJavascriptFile.js.

    function runMyJavascript() {
    alert ("Hello World!");
    }
    No it does not work, I have entered it but nothing here is my web page.

    Code:
    <html>
    <head>
    <title>MancunianMacca - More Than a Name</title>
    <link rel="stylesheet" href="style.css">
    <link rel="icon" 
          type="image/gif" 
          href="favicon.gif">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type = "text/javascript" src = "/JavaScript/Caught.js"></script>
    </head>
    <body bgcolor="#CCCCCC" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <table valign="top" align="center" width="1000" height="120" border="0" cellpadding="0" cellspacing="0">
    	<tr>
    		<td rowspan="2">
    			<img src="images/header_01.png" width="20" height="113" alt=""></td>
    		<td colspan="3">
    			<img src="images/header-projects_02.png" width="960" height="83" alt=""></td>
    		<td rowspan="2">
    			<img src="images/header_03.png" width="20" height="113" alt=""></td>
    	</tr>
    	<tr>
    		<td>
    			<img src="images/header_04.png" width="7" height="30" alt=""></td>
    		<td>
    <img src="images/header_05.png" alt="" width="945" height="30" border="0" usemap="#Map"></td>
    		<td>
    			<img src="images/header_06.png" width="8" height="30" alt=""></td>
    	</tr>
    	<tr>
    		<td colspan="5">
    			<img src="images/header_07.png" width="1000" height="7" alt="">
            </td>
    	</tr>
    </table>
    <table align="center" width="940" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="marquee"><marquee behavior="scroll" direction="left" onMouseOver="this.stop();" onMouseOut="this.start();">News: If you need to contact me directly, my email is james@mancunianmacca.co.cc , please try and use the contact form!</marquee></td>
    
      </tr>
    </table>
    <table align="center" width="960" height="30" border="0" cellpadding="0" cellspacing="0" class="content">
    	<tr>
    		<th class="main">
    			<div class="headers">MancunianMacca.co.cc</div>
            </th>
    		<td class="side">
    		  <div class="headers">Social Networking...</div>
          </td>
    </tr>
        <tr>
    	  <td class="maincontent" valign="top">
            <h3>Projects</h3>
            <p>MancunianMacca's Guide to Computing is a project that I embarked upon in 2010, I released two editions of the magazine to the public. The project met its demise when I simply did not have time to run it. The project did not gather much intrest and will not be restarted. Download the first two editions &quot;<a href="downloads/Guide to Computing.zip">Here</a>&quot;.</p>
            <p>I 
            have been learning javascript and think that you may like to see some of my work so far... It's basic but it's still really cool :D. Click &quot;<a href="JavaScript/Caught.html">Here</a>&quot; to see my story generator. Click "<a href="JavaScript/If Then.html">Here</a>&quot; to see my question poser.
            
            <input type = "button" onclick = "Caught()">
           
    <p>&nbsp;</p>
            <p>&nbsp;</p>
    <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p>
          <p>&nbsp;</p></td>
    		<td class="sidecontent" valign="top">
    			<p><a href="http://www.facebook.com/MancunianMacca"><img src="images/facebook.png"></a> &nbsp; <a href="http://www.twitter.com/MancunianMacca"><img src="images/twitter.png"></a> &nbsp; <a href="http://www.youtube.com/mrbeanlver101"><img src="images/youtube.png"></a>
                <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.mancunianmacca.co.cc"
            scrolling="no" frameborder="0"
            style="border:none; width:300px; height:20px"></iframe>
    			  <script src="http://widgets.twimg.com/j/2/widget.js"></script>
    			  <script>
    new TWTR.Widget({
      version: 2,
      type: 'profile',
      rpp: 6,
      interval: 6000,
      width: 280,
      height: 400,
      theme: {
        shell: {
          background: '#96c2ff',
          color: '#000000'
        },
        tweets: {
          background: '#00609c',
          color: '#ffffff',
          links: '#000000'
        }
      },
      features: {
        scrollbar: false,
        loop: false,
        live: false,
        hashtags: true,
        timestamp: true,
        avatars: false,
        behavior: 'all'
      }
    }).render().setUser('MancunianMacca').start();
                  </script>
    	  </p>
    	  </td>
    </tr>
    </table>
    <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">
      <tr>
        <td background="images/footer.png" height="40" class="footer">&copy;2012-2013 MancunianMacca. All Rights Reserved.</td>
      </tr>
    </table>
    <map name="Map"><area shape="rect" coords="360,-2,441,34" href="projects.html"><area shape="rect" coords="725,-15,808,33" href="links.html"><area shape="rect" coords="615,-13,698,35" href="http://webmail1.hourb.com/roundcube/" target="_blank">
      <area shape="rect" coords="148,-25,198,45" href="index.html">
      <area shape="rect" coords="252,-39,319,55" href="about.html">
      <area shape="rect" coords="484,-12,567,36" href="contact.html">
    </map>
    </body>
    </html>
    and here is my script that I want to run

    Code:
    <script type = "text/javascript">
    
    // get user to add name
    
    var name_entry = prompt ("Please Enter your Name!", "James");
    
    // declare some short strings
    
    var heading = "OI Stop";
    var stating = ", I knew you did it!";
    var told = "I told you that I would find out";
    var mistake = "I guess you just made a mistake entering your name,";
    var punish = "Now go back to the previous page";
    
    // construct some longer strings
    
    var stating_name = name_entry + stating;
    var mistake_name = mistake + name_entry;
    
    document.writeln(heading.bold() + "<br>");
    document.writeln(stating_name + "<br>");
    document.writeln(told + "<br>");
    document.writeln(mistake_name + "<br>");
    document.writeln(punish + "<br>");
    
    </script>

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Get rid of the HTML script tags out of the external JavaScript file.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    MancunianMacca (03-01-2012)

  • #9
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by felgall View Post
    Get rid of the HTML script tags out of the external JavaScript file.
    What HTML script?? Sorry I am just learning JS and am not too familier wit it, I know HTML and I don't see any tags in there?

  • #10
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    Well, load the script into the browser in the usual way,
    <script type = "text/javascript" src = "/Javascript/myJavaScriptfile.js"></script>

    then execute it as needed with

    <input type = button" onclick = "runMyJavascript()">
    where runMyJavascript() is a function loaded from an external file, that is the content of myJavascriptFile.js.

    function runMyJavascript() {
    alert ("Hello World!");
    }
    OH I'm with you now but I have a question... How do i get it to run my script instead of "Hello World" alert??

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Quote Originally Posted by MancunianMacca View Post
    OH I'm with you now but I have a question... How do i get it to run my script instead of "Hello World" alert??
    replace alert('hello world'); with your code.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    MancunianMacca (03-01-2012)

  • #12
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts

    Question

    Quote Originally Posted by felgall View Post
    replace alert('hello world'); with your code.
    I'm totally stumped with this, Ok, I don't know where to put evrything so I did this...

    In the <head> I put
    Code:
    <script type = "text/javascript" src = "/Javascript/myJavaScriptfile.js"></script>
    and the rest in the body:

    Code:
    <input type = button" onclick = "runMyJavascript()">
    
    function runMyJavascript() {
    alert ("Hello World!");
    }
    and Nothing happens.! Exept that the "function run myJavascript... appears as plain text.

  • #13
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,245
    Thanks
    203
    Thanked 2,555 Times in 2,533 Posts
    We seem to be making heavy weather of this. Your script within the HTML must be enclosed in <script type = "text/javascript"> </script> tags.

    Code:
    <input type = button" onclick = "runMyJavascript()">
    
    <script type = "text/javascript">
    function runMyJavascript() {
    alert ("Hello World!");
    }
    </script>
    Your script in the external .js file must NOT contain any HTML tags. If the above function runMyJavascript() was in the external file, you would call (execute) it simply with <input type = button" onclick = "runMyJavascript()">

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    MancunianMacca (03-01-2012)

  • #14
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by Philip M View Post
    We seem to be making heavy weather of this. Your script within the HTML must be enclosed in <script type = "text/javascript"> </script> tags.

    Code:
    <input type = button" onclick = "runMyJavascript()">
    
    <script type = "text/javascript">
    function runMyJavascript() {
    alert ("Hello World!");
    }
    </script>
    Your script in the external .js file must NOT contain any HTML tags. If the above function runMyJavascript() was in the external file, you would call (execute) it simply with <input type = button" onclick = "runMyJavascript()">
    Ok, so I put it all in and my script ran on page load ???? It does not wait untill I press th button.
    Code:
    var question = prompt("Do you like this code?","Type Yes or No");
    if (question == "yes")
    {
    	alert("why thank you");
    }
    if (question == "Yes")
    {
    	alert("why thank you");
    }
    if (question == "No")
    {
    	alert("Nasty!");
    }
    if (question == "no")
    {
    	alert("Nasty!");
    }
    This is the content of the .js file...
    Last edited by MancunianMacca; 03-01-2012 at 07:37 PM. Reason: Explination of code

  • #15
    New Coder
    Join Date
    Feb 2012
    Location
    England
    Posts
    59
    Thanks
    12
    Thanked 2 Times in 2 Posts
    Right, I know understand the logic behind fuctions, BUT, how do i get my code inside a function.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •