时间戳

首页 > 解决方案 > 将多个 .html 文件链接到一个 .js 文件

javascript - 将多个 .html 文件链接到一个 .js 文件

问题描述

我想创建一个简单的登录和注册页面。我使用 atom 分别创建了它们，它们保存在我计算机内的同一个文件夹中。我添加了一个 css 文件，并且能够将其链接到两者都很好。

现在问题来了。

注意：这只是一个有趣的小项目，这就是我只使用 localStorage 的原因。

我在我的网站文件夹中创建了一个 .js 文件。

//SIGN UP PAGE
function create(){
  var un = document.getElementById("username").value;
  var pw = document.getElementById("password").value;
  localStorage.setItem(username, un);
  localStorage.setItem(password, pw);
  window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
}
//LOGIN PAGE
function login(){
  if(document.getElementById("usernamel") === localStorage.getItem(username)){
    if(document.getElementById("passwordl") === localStorage.getItem(password)){
      window.location.href = "file:///C:/Users/User/OneDrive/Desktop/Social_Share/ssprofile.html";
    }else{
      document.getElementById("errormsg").innerHTML = "Incorrect Password or username";
    }
  }else{
    document.getElementById("errormsg").innerHTML = "Sorry, this account does not exist";
  }
}

并在按下创建帐户按钮时向 localStorage 添加值。

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

这是我用于两个 html 文件以连接到 js 文件的完全相同的代码，但只有一个有效。无论如何，只有一个html文件可以连接到js文件。我已经复制和粘贴了很多次。我尝试过不同的标签。我已经尝试了我能想到的一切，这就是我自己在互联网上寻求答案的地方。

为了测试它是否正常工作，我为一个按钮创建了一个 onclick() 函数，并告诉它把我带到一个单独的页面。都没有用，我现在也检查了我的拼写大约 10 次。

此外，每当我测试文件时，我都会在浏览器中打开它们，所以我不会收到任何错误消息。而且我无法在 atom 中测试它们，因为它只是在视图的滚动框中显示代码。

编辑：

ssjavascript.js:11 Uncaught ReferenceError: Invalid left-hand side in assignment
    at login (ssjavascript.js:11)
    at HTMLInputElement.onclick (sslogin.html:22)

这是我在非工作页面上单击按钮时得到的。

登录是指单击的按钮

ssjavascript.js 指的是我用来保存 javascript 的文件

sslogin.html 是页面文件

我不知道这是否有帮助，我已经迷失了很多。

完整代码：

注册页面

<!DOCTYPE html>
<html>
    <head>
        <title>
            Sign Up
        </title>
      <link rel="stylesheet" href="sscss.css">
    </head>
    <body>
        <div id="logo">

        </div>
        <div id="logo2">
        </div>
        <div id="usernametxt">
            Username:
        </div><input id="username">
        <div id="passwordtxt">
            Password:
        </div><input id="password"><br><br>
        <div id="security">
            For the sake of security,<br>we suggest creating a unique<BR>password specific for this site.<br>
            You are also limited to 1<br>account, creating a new one<br>will erase previous data.
        </div><br><br>
        <input type="button" id="submit" onclick="create()" value="Create Account"><br><br>
        <a href="file:///C:/Users/User/OneDrive/Desktop/Social_Share/sslogin.html">Already Have One? Log In</a>

      <script type="text/javascript" src="ssjavascript.js">
            </script>
    </body>
</html>

登录页面

<!DOCTYPE html>
<html>
    <head>
        <title>
            Log In
        </title>
      <link rel="stylesheet" href="sscss.css">
    </head>
    <body>
        <div id="logo">

        </div>
        <div id="logo2">
        </div>
        <div id="usernametxt">
            Username:
        </div><input id="usernamel">
        <div id="passwordtxt">
            Password:
        </div><input id="passwordl"><br><br><br><br>
        <input type="button" id="submitl" onclick="login()" value="Login"><br><br>
        <a href="file:///C:/Users/User/OneDrive/Desktop/Social_Share/sscreateaccount.html">Don't Have an Account? Create One</a>
      <br><br>
      <div id="errormsg">

        </div>

      <script type="text/javascript" src="ssjavascript.js">
            </script>
    </body>
</html>

javascript 文件已经在上面，而个人资料页面只是一个空白，直到我真正弄清楚如何让某人到达那里。

此外，我更改了 Javascript 以将值与 localStorage 进行比较，而不是分配，但它似乎仍然无法按预期工作。

编辑：

感谢您的建议。即使它们都没有单独工作，如果你们没有推动我进行更多搜索，我仍然不会解决我的问题。

我发现，使用""将我的变量保存为字符串，所以我使用''它并且它完全按照我想要的方式工作。

再次，非常感谢您的帮助。:)

标签： javascripthtmlweb

解决方案

推荐阅读