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