Display username from login to other page

I have a simple login page (login_page.html). The farmerId (= user name) which is used for the login, should be displayed on the next page (after login), which is the farmer.html + farmer.js I tried it as followed, but the farmerId/user name is not displaying at the farmer page.

***changed to minimal reproducible example ***

testlog.html

 <!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <script defer src="testlog.js"></script>
</head>

<body>
    <form id="login-form" action="testfarmer.html">
      <input type="text" name="username" id="username-field" class="login-form-field" placeholder="FarmerID"/>
      <input type="submit" value="Login" onclick="login-form-submit();"/>
    </form>
  </main>
</body>

</html>

testlog.js

function login-form-submit()
{
  var farmerID=document.getElementById("username-field").value;
  localStorage.setItem("id", farmerID);
  return false;
}

testfarmer.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Farmer</title>
    <script type="text/javascript" src="testfarmer.js"></script>    
</head>

<body>
    FarmerID <span id="farmer"></span>          
</body>

</html>

testfarmer.js

document.getElementById("farmer").innerHTML=localStorage.getItem("id");

Does someone has any suggestion, where my problem could be?

Answer

I got the problem, as @mplungjan suggested, the execution was wrong. This is the corrected html file:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Farmer</title>  
</head>

<body>
    FarmerID <span id="farmer"></span> 
    <script type="text/javascript" src="testfarmer.js"></script>           
</body>

</html>

If the link for testfarmer.js is in the head, it is not executing correct.This is why I put it direct under the element

Advertisement

Answer