HTML Input onclick to javascript? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
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,

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

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>

You have two basic routes:
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.
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.

The easiest/simplest would be to do the following:
Run your HTML thru a web server (Apache on *nix or IIS on Windows)
Put the HTML file and javascript file in the same folder
Edit the HTML file to include a line at the bottom: <script src="Map.js"></script>
Make sure the MapPoint() is properly defined in your Map.js file

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

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.
If you use the onclick attribute, most developers these days use all lower case
Typically functions start with a lowercase letter by convention... e.g. mapPoint();
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)
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();
});

Related

Document specified to reference content when creating a website [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I have my adress written in 30 html pages on my website. When I move I am going to want to change the address. Instead of going through the code and changing it for all pages, I am looking for a method to change it in one place.
What would be the best practice for this sort of problem? There will probably not be that many references that would need to be stored. Any help on the matter will be appreciated.
There are literally dozens of ways to do this kind of thing. You could rewrite your website in any of the wide variety of server side languages, whether it's a scripting language like PHP or a compiled language like C# or Java.
You don't have to go that drastic, though. You can simplify it by including references in your pages. This can be a direct usage of another HTML file, or it can be a JavaScript file. The link below shows how to do the HTML file linkage using JQuery, as well as JavaScript. JavaScript doesn't have to be difficult and it can be referenced from all your pages, so it can have all the things in one file that you want to change, allowing you to change one file and it reflect on all your other pages.
HTML include with JQuery: (if you aren't already using JQuery, I'd hesitate to use a whole library to do one function that can be done in vanilla JS just as easily)
a.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#includedContent").load("b.html");
});
</script>
</head>
<body>
<div id="includedContent"></div>
</body>
</html>
b.html:
<p>This is my include file</p>
Or JavaScript:
a.html:
<html>
<body>
<h1>Put your HTML content before insertion of b.js.</h1>
...
<script src="b.js"></script>
...
<p>And whatever content you want afterwards.</p>
</body>
</html>
b.js:
document.write('\
\
<h1>Add your HTML code here</h1>\
\
<p>Notice however, that you have to escape LF's with a '\', just like\
demonstrated in this code listing.\
</p>\
\
');
Include another HTML file in a HTML file
If you are using PHP already, there's a good chance you can do it with the PHP you're already using by reading from a text file and inserting the HTML text into the page you are generating.
<?php
// do php stuff
include('fileOne.html');
// or //
readfile('fileTwo.html');
?>
how to embed html files in php code?

How to use the same javascripts in multiple content pages? [duplicate]

This question already has answers here:
How to use external ".js" files
(6 answers)
Closed 5 years ago.
I have 4 javascripts within <script> tags in all multiple of my content pages. They handle popups and disabling of other buttons on button clicks. So at the moment I have a lot of duplicate script code on every page.
Is it possible to have these scripts in the master page instead and have all my content pages reference them? If so, where in the master page do I put them and how do I reference them on a button click?
I have searched google but haven't found any good answers.
Edit 1: To deal with the duplicate marking.
I am mostly looking to avoid duplicate code here, that is why I want to put this in my master page. If it is possible to put my scripts in a JS file, include that on the master page and have all my content pages access the scripts from there. Then that is absolutely a solution to my question and will gladly accept an answer that describes how I do that. To be clear, it is the accessing part that I haven't found how to do.
But just saying something like, "put the scripts in a JS file and include the file on your page", is not a solution to my question since it just hides the duplicity in files instead.
Edit 2: What I have tried now.
As per M Idrees's answer below I have put my scripts into buttonScripts.js, which is located in my projects Scripts folder. I added it to the head of my master page:
<head runat="server">
<script type="text/javascript" src="~/Scripts/buttonScripts.js"></script>
...
</head>
I kept the click functions on my buttons as is:
<button ... onclick="if (!myFunc(this)) { return false; }"></button>
Then I removed the scripts from my content pages and started my web app. Now I get the error "myFunc is undefined". This is what I mean by "it is the accessing part that I haven't found how to do" above.
Edit 3: I suck.
Tried to use a relative path, as you can see above. With a proper path:
<head runat="server">
<script type="text/javascript" src="Scripts/buttonScripts.js"></script>
...
</head>
It works as intended. Thanks!
Within the head tag of your master page. Add your script reference, like:
<script type="text/javascript" src="path/to/script.js"></script>
Remove all other script references from your content pages. It will automatically get from master page.
Regarding your point: it is the accessing part that I haven't found how to do.
You don't have to change anything about accessing script code. It will work as it might be working now.
Do these steps, and if still have any problem, just update in this post.

Accessing HTML <textarea> data and store them as file [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I have following task:
I need to gather information from multiple <textarea> tags, format them a bit and save on hard drive preferably in CSV format.
Important note no. 1: that data source HTML document is a file on my local hard drive, it's not hosted on any server (this file is a product of export from some database management tool).
Important note no. 2: only script language engine available is python
I already do some effort on preparing some python script that embed CSS stylesheet links and JavaScript links into this HTML file to use and some jQuery library functions for displaying purposes.
Now, on specific action (i.e. "save" button click) I need to:
Search for filled <textarea> tags (jQuery job?)
Format them and glue in single variable preferably (jQuery as well)
Display "save as" dialogue
Save file on hard drive
Well as far as I know, JavaScript is not allowed to manipulate files on machine file system, so for writing file this should be some server-side script, is that correct?
Should this save script be triggered by "save as" button? (realized as submit form button)? If yes, can I run firstly some JavaScript function (gathering textarea data and format them) and later save this in file?
How this kind of data can be passed to this server-side script?
Thank you for all kind of help and advice.
EDIT:
I see that some users already point <a> tag with download attribute, but there is one additional issue: we have to assume IE as web browser, which by default does not support download attribute.
The correct answer was posted as a comment instead of as an answer for some reason. Code courtesy of gabrielperales:
JavaScript:
$(function(){
function toCSV(text){
var str= 'data:application/octet-stream;charset=utf-16le;base64,';
str += btoa(text);
return str;
}
$('#editor').on('change', function(){
$('#download').attr('href', toCSV($(this).val()));
});
});
HTML:
<textarea id="editor"></textarea>
<br/>
<a id="download" href="" download="file.csv">Download</a>

addEventListener load on ajax load WITHOUT jquery [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I have 4 html files and 4 javascript files. Each javascript file is loaded externally from each html file
index.html loads javascript.js
1.html loads javascript1.js
2.html loads javascript2.js
3.html loads javascript3.js
The issue that I'm having is that index.html uses AJAX to load one of the 3 other pages when a specific button is pressed. Then what is supposed to happen is that particular page would load its own corresponding javascript program which at the end of that program contains a window.addEventListener that should run on "load" and run the function "registerListeners". RegisterListeners then registers an event listener on a button on that page which currentyl just displays an alert for testing.
What I have figured out is that the parameter "load" for window.addEventLisener doesnt seem to be valid when the page is loaded dynamically with ajax.
I cant put all of the code in the main javascript because it contains some getElementById calls that call elements from one of the numbered pages that, if executed on main page load will generate errors because those specific ID's dont exist yet.
This is homework and so I need to get pointed in the right direction to doing this with html5 and javascript WITHOUT jquery. I understand that it might be easier with jquery, but I need to figure out how to do it without for the time being.
Would there be such a thing as window.addEventListener("AJAXload", someFunction(), false) ???
Instead of adding an event listener programatically, you could possibly insert a bare Javascript function at the end of your AJAX'ed content. This would be run when the content is loaded, calling something in the parent window.
AJAX BLAH BLAH BLAH
<script type="text/javascript">
childContentLoaded(); //or whatever you need
</script>
you may also need to add "parent".functionName()

Is there a way to reduce copy pasting in html/css for content which every page contains? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
What I mean is that when creating multiple pages currently I always have to copy paste the header, navigation and footer boilerplate. And while it isn't all too hard to do(can basically copy-paste an emmet line and have it handle everything). I was wondering if there is a way where I wouldn't have to do that be it server side or as a plugin/addon for sublime text.
The current idea I have is to perhaps create a server side js which I could then possibly import on every page, though I know almost no js to pull that off.
Any suggestions?
In Html5 you can use the object tag to include a file.
Basically you create a single file containing your header and the common code that goes on each page.
Then on every page of your site you add
<object name="includedfile" type="text/html" data="page.inc"/>
where you need the content to appear.
Edit:
Check also jquery if you prefer to use javascript. There are easy functions to achieve the same result like:
$.get('test.html')
.success(function(data) {
$('div.content').html(data);
});
Where test.html is the page that you want to load and div.content is the place where you want to put the loaded code.
The only answer which works pre HTML5 is to learn PHP and/or install a system which allows you to use page templates. Most web servers have PHP installed.
Your page would then look something like this:
<?php
include "header.php";
?>
<!-- your html page code here -->
<?php
include "footer.php";
?>
At this point I would recommend you move into a more robust web language. Here are some options.
Ruby on Rails (yay!)
PHP
ASP.NET (yech)
You will definitely want more of the powerful features once you begin working on more complex websites.

Categories