0

I'm new to JavaScript and I'm trying to link my button to a external function in a JavaScript file on my c: drive. The current code looks like

<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="MapPoint()" >

What I want it to do is to go to the JavaScript file (src="./_JavaScript/Map.js) and run the MapPoint() function. This has to be possible?

Thanks,

scunliffe
  • 62,582
  • 25
  • 126
  • 161
user3586908
  • 17
  • 1
  • 5

6 Answers6

1
<button type="button" id="btnPoint" style="width: 90px; height: 30px;" onClick="JavaScript:MapPoint()" >

Include the JavaScript file with this in the header

<script src="./_JavaScript/Map.js"></script>
agressen
  • 459
  • 1
  • 5
  • 17
  • In `"JavaScript:MapPoint())"` the "JavaScript:" part is seen as a an unused label. I think you have confused intrinsic listeners with the use of the *javascript* pseudo-protocol in the href attribute of A elements. – RobG May 05 '14 at 23:34
0

You need to include the external file that contains the function.

In your html add the script tag to the javascript file loc:

<script type="text/javascript" src="path/to/jsfile/js"></script>
user3473534
  • 131
  • 1
  • 10
0

What you have will actaully work just fine as long as you have a function called "MapPoint" defined on your page.

Your function should be available to this page either included in the page or linked to an external file. It can be hosted online somewhere or just relative to this page's URL... but it shouldn't be linked to off your actual C:\ (for security reasons... and when you do publish this page it won't work).

The purists will suggest a few changes to your code though.

  1. If you use the onclick attribute, most developers these days use all lower case
  2. Typically functions start with a lowercase letter by convention... e.g. mapPoint();
  3. For cleanliness you'll likely want to put those functions in a separate file that can be cached by the end user's browser (using an expires header)
  4. If you end up using jQuery (or something similar) you can make you code a bit cleaner (although a bit abstract) by not using the onclick attribute but rather binding the event to the element through a jQuery selector

To include your function in an external file just add a tag like this to your page.

<script src="./JavaScript/Map.js"></script>

For legacy reasons the closing tag is required. Place the tag inside the <head>...</head> tag if you are unsure where to put it, but if you know it won't be needed until after the page has loaded the best place to put it is just before the closing </body> tag.

If you do end up using jQuery there's several ways to bind this event but the easiest is to use jQuery's click method:

$('#btnPoint').click(function(){
  //do what you want here... or even call another method
  mapPoint();
});
Community
  • 1
  • 1
scunliffe
  • 62,582
  • 25
  • 126
  • 161
0

You have two basic routes:

  1. You can open your static html file that uses relative links everywhere to reference your additional resources. So you can include your javascript file using <script src="./_JavaScript/Map.js"></script> if Map.js is in the _JavaScript folder along with your HTML file.
  2. You can have a Webserver hosted locally on your machine to serve static and dynamic content from your machine. A good place to start with this is by using a WAMP application stack.
Sunny Patel
  • 7,830
  • 2
  • 31
  • 46
0

The easiest/simplest would be to do the following:

  1. Run your HTML thru a web server (Apache on *nix or IIS on Windows)
  2. Put the HTML file and javascript file in the same folder
  3. Edit the HTML file to include a line at the bottom: <script src="Map.js"></script>
  4. Make sure the MapPoint() is properly defined in your Map.js file
Al Dass
  • 831
  • 15
  • 23
0

Do as agressen said and then to add event on your button try this

var bt = document.getElementById('btnPoint');
bt.addEventListener('click', function () { MapPoint();}, false);
keypaul
  • 497
  • 8
  • 12