2

I have 2 pages. one.html and two.html

The first html page contains a script tag with a java script function modify(d).In two.html i want to call this same function instead of retyping it again.How can i do this? Do i need to create a link between the pages? if yes, How?

I have tried using in the second file. But i keep getting the error: "modify(d) not defined" in the console.

Both of the files are placed next to each other in my folder structure so the path should be correct.

Thank you in advance.

Improve this question
2
  • 1
    Create a JS file and reference this file in both HTML documents like <script src="path/some.js"></script> Commented Dec 3, 2016 at 9:59
  • It is also possible to call a function from another page by loading it in an iframe. Commented Jun 6, 2022 at 23:17

4 Answers 4

Reset to default
1

If you drop inline scripts (and it goes for inline styles too) and do like this, where you store functions (and rules) in a file of its own, you will be able to reuse it (them) like shown in below sample

File: one.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page One</title>
        <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
        <link rel='stylesheet' type='text/css' href='css/style.css' />
        <script src="js/script.js"></script>
    </head>
<body>
    Page one content  
</body>
</html>

File: two.html

<!DOCTYPE html>
<html>
    <head>
        <title>Page two</title>
        <meta http-equiv='content-type' content='text/html; charset=UTF-8' />
        <link rel='stylesheet' type='text/css' href='css/style.css' />
        <script src="js/script.js"></script>
    </head>
<body>
    Page two content  
</body>
</html>

File: style.css

body {
  background: url(../images/bkg.png);
}

File: script.js

function modify(d) {
  ....
}

And have your files located like this in your folder

/www/one.html
/www/two.html
/www/js/script.js
/www/css/style.css
/www/images/bkg.png
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

You can extract your JavaScript script tag content into its own file and include that script in both HTML pages, so:

  • create a file somewhere in your folder structure (you can put it in the same path as your HTML files for ease at the moment) let's say it's called my script.js

  • in each one of your HTML files you can include your script using script tags:

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

You can include the script tag in the <head> of your HTML files or as the last element within the <body> tag.

Improve this answer

Comments

0

You'll need to put the JS in its own file and reference it from both HTML file. Below is a pseudo code to explain better.

script.js

$('.box').click(function(e) {
  e.preventDefault();
  console.log('Box has been logged!');
});

index.html

<script src="./script.js"></script>
<div class="box"></div

other.html

<script src="./script.js"></script>
<div class="box"></div
Improve this answer

Comments

0

Use the concept of External Javascript. Refer the link. Using this, create a single Javascipt file and put the modify() method into it. Now load the javascript on both the forms.(i.e one.html and two.html)

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.