How to attach two html files and two JavaScript files to each other?

Question

I want to attach two HTML and two JavaScript files to each other so that I can access the variables and functions of each other.

I have four files as LogIn.html, LogIn.js, signUp.html and signUp.js. I have created the login page using logIn.html and respective logIn.js file. I also created the "Create New Account" page to submit personal information using signUp.html and respective signUp.js file.

on logIn.html, when I clicked "Create New Account" the signUp.html file gets opened which I stored in the same folder.

Now when the user fills the information in signUp.html, all the information stored in some variable like firstName, username, password, age, etc in the signUp.js file.

Now when the "submit" button is clicked after filling all the information in the signUp.js file, LogIn.html file gets opened.

Now I want to use those username and password variable in my "username" and "password" field respectively in LogIn.html file. Now what I need to do to achieve this or is this never possible? I could have provided the code but it doesn't make any difference. I hope you get me.

I tried to search the same question on the site but couldn't find the specific answer.

Possible duplicate of [How to pass variable value between different html pages in javascript](https://stackoverflow.com/questions/23213788/how-to-pass-variable-value-between-different-html-pages-in-javascript) — Heretic Monkey, Mar 30 '19 at 12:52
@HereticMonkey i dont know jquery and the answer of questions has given in jquery. can you please tell me what to do here. — Aniket Jadhav, May 18 '19 at 10:20
...There's no jQuery in any of the answers. Only the question has jQuery in it. Please, read the answers. Try them out. If you have specific questions about specific attempts, as questions about those specific attempts. — Heretic Monkey, May 18 '19 at 13:02
cant read that answer clearly . can you please write your own answer. i would be really happy. have you understood my question well? if yes then please help. — Aniket Jadhav, May 18 '19 at 14:08

score 0 · Answer 1 · edited Mar 30 '19 at 12:54

I think it better to show you a example of code.

As i understand you want to attach the the files with each other.If i am right you just have to attach your js file to you html code like below in example code.Then you should have to attach you html files to each other with respect to the flow of code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="main.js"></script>
</head>
<body>
    .........................
........................
..................

</body>
</html>

Also

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
form {border: 3px solid #f1f1f1;}

input[type=text], input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

button:hover {
  opacity: 0.8;
}


.imgcontainer {
  text-align: center;
  margin: 24px 0 12px 0;
}

img.avatar {
  width: 40%;
  border-radius: 50%;
}

.container {
  padding: 16px;
}

span.psw {
  float: right;
  padding-top: 16px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
.cancelbtn {
     width: 100%;
  }
}
</style>
</head>
<body>

<h2>Login Form</h2>

<form action="/action_page.php">
  <div class="imgcontainer">
    <img src="img_avatar2.png" alt="Avatar" class="avatar">
  </div>

  <div class="container">
    <label for="uname"><b>Username</b></label>
    <input type="text" placeholder="Enter Username" name="uname" required>

    <label for="psw"><b>Password</b></label>
    <input type="password" placeholder="Enter Password" name="psw" required>

    <button type="submit">Login</button>
    <label>
      <input type="checkbox" checked="checked" name="remember"> Remember me
    </label>
  </div>

  <div class="container" style="background-color:#f1f1f1">
    <span class="psw">Forgot <a href="#">password?</a></span>
  </div>
</form>

</body>
</html>

If you still have the problem then its better to show your code

Please [edit] your existing post rather than adding an additional one. — Heretic Monkey, Mar 30 '19 at 12:48

score -1 · Answer 2 · edited Mar 30 '19 at 12:52

-1

you should have to use the link tag in index html file in order to attach the other html files like,

 <link href="SignUp.html">

same for "LogIn.html" file.

Or if you want to link the javaScript file to you html file you should have use the "script" tag like,

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

edited Mar 30 '19 at 12:52

Gabriele Petrioli

191,379
34
261
317

answered Mar 30 '19 at 06:47

Malik

11
1

Try to explain more clearly why this is an answer to the question. – Jeroen Heier Mar 30 '19 at 06:51
couldn't get you, bro. will you elaborate, please? – Aniket Jadhav Mar 30 '19 at 06:53

How to attach two html files and two JavaScript files to each other?

2 Answers2