Resolved Help! I need help with running an external ".js" file from a link. [Archive]

...

View Full Version : Resolved Help! I need help with running an external ".js" file from a link.

MancunianMacca

02-29-2012, 06:05 PM

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.

Philip M

02-29-2012, 06:36 PM

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

<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

MancunianMacca

02-29-2012, 07:03 PM

Oh so I make it a variable first? I'll test this to see if it's what I wanted it for. Thanks

MancunianMacca

02-29-2012, 07:08 PM

------

MancunianMacca

02-29-2012, 07:09 PM

Philip M

02-29-2012, 07:21 PM

MancunianMacca

02-29-2012, 07:50 PM

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.

<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 "<a href="downloads/Guide to Computing.zip">Here</a>".</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 "<a href="JavaScript/Caught.html">Here</a>" to see my story generator. Click "<a href="JavaScript/If Then.html">Here</a>" to see my question poser.

<input type = "button" onclick = "Caught()">

<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p></td>
<td class="sidecontent" valign="top">
<p><a href="http://www.facebook.com/MancunianMacca"><img src="images/facebook.png"></a>   <a href="http://www.twitter.com/MancunianMacca"><img src="images/twitter.png"></a>   <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">©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

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

felgall

02-29-2012, 07:53 PM

Get rid of the HTML script tags out of the external JavaScript file.

MancunianMacca

02-29-2012, 09:19 PM

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?

MancunianMacca

02-29-2012, 09:41 PM

felgall

03-01-2012, 01:12 AM

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.

MancunianMacca

03-01-2012, 07:32 AM

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 <script type = "text/javascript" src = "/Javascript/myJavaScriptfile.js"></script>

and the rest in the body:

<input type = button" onclick = "runMyJavascript()">

function runMyJavascript() {
alert ("Hello World!");
}
and Nothing happens.! Exept that the "function run myJavascript... appears as plain text.

Philip M

03-01-2012, 07:46 AM

MancunianMacca

03-01-2012, 06:36 PM

We seem to be making heavy weather of this. Your script within the HTML must be enclosed in <script type = "text/javascript"> </script> tags.

<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.

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...

MancunianMacca

03-01-2012, 06:53 PM

Right, I know understand the logic behind fuctions, BUT, how do i get my code inside a function.

MancunianMacca

03-01-2012, 06:59 PM

OKAY!!! I GOT IT!!! Thanks for all the help guys. Here is the final code for the JS file...

function runMyJavascript()
{
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!");
}
}

Philip M

03-01-2012, 07:00 PM

Right, I know understand the logic behind fuctions, BUT, how do i get my code inside a function.

I really think that you ought to read up about Javascript somewhere. This is absolutely basic stuff. You get your code in function with

function functionName() {
// your code goes in here
}

You do not have to make separate if statements for "yes" and "Yes". Have a look at the built-in Javascript method .toLowerCase(). That would cover YES and YeS as well.
It would make more sense if you named your variable "answer" rather than "question".

MancunianMacca

03-01-2012, 07:02 PM

I really think that you ought to read up about Javascript somewhere. This is absolutely basic stuff. You get your code in function with

function functionName() {
// your code goes in here
}

No i knew how to it's resolved now anyway i did it. It was just because all the "if then" commands had {} them on them and I thought it would mess it up but now It's sorted. Thanks for all the help guys...

Philip M

03-01-2012, 07:11 PM

No i knew how to it's resolved now anyway i did it. It was just because all the "if then" commands had {} them on them and I thought it would mess it up but now It's sorted. Thanks for all the help guys...

There is no "if then" construct in Javascript. Unless you get a grip on the basic fundamentals of the language you will have a lot of grief.

MancunianMacca

03-01-2012, 07:31 PM

There is no "if then" construct in Javascript. Unless you get a grip on the basic fundamentals of the language you will have a lot of grief.

"if (question == "yes")" that is refered to as an "if then" here at http://www.webteacher.com/javascript/ch03_1.html

Philip M

03-01-2012, 07:45 PM

"if (question == "yes")" that is refered to as an "if then" here at http://www.webteacher.com/javascript/ch03_1.html

Well, that is rubbish, as you can detect from the utterly obsolete
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

if then is a construct of BASIC. The word then does not feature in Javascript.

I would not seek to learn from that poor-quality site.

MancunianMacca

03-01-2012, 08:16 PM

Well, that is rubbish, as you can detect from the utterly obsolete
<SCRIPT LANGUAGE="JavaScript">
<!-- Beginning of JavaScript -

if then is a construct of BASIC. The word then does not feature in Javascript.

I would not seek to learn from that poor-quality site.

Ha, thanks for the tip, i'm just using google to find my way around at first. Going to buy a book when I can find a decent one :P

felgall

03-02-2012, 07:41 AM

Right, I know understand the logic behind fuctions, BUT, how do i get my code inside a function.

Wrap the function around the code. If your function is called myfunction then add:

myfunction = function() {

in front of the statements to be included and

};

after the statements.