我是一個非常新的編碼員，正在嘗試構建我的第一個應用程式。我創建了一個登錄頁面，但似乎有什么東西阻止了它。我不確定為什么它不起作用，可能是一個小錯誤還是其他什么？我的注冊頁面作業正常，但登錄甚至沒有點擊。任何人都可以幫助找出我的代碼中可能存在的錯誤嗎？
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<!-- CSP, above, is used to set what resources the app can access -->
<script src="components/loader.js"></script>
<!-- Required Monaca stuff above, do not edit -->
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css" />
<link rel="stylesheet" href="css/mycolors.min.css">
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<!-- START Welcome screen -->
<section data-role="page" data-theme="c" id="pgWelcome">
<!-- Main content in the middle of the screen -->
<article role="main" class="ui-content">
<h2>CBDB -- Comic Book Database</h2>
<p><img src="images/usg-14.png" alt="usg-14" class="imgMain"></p>
<p>Collect, store, save, and share your comics in one place. Learn all about the great world of comics.</p>
<p>Need an account? <a href="#pgSignUp" data-role="button" data-transition="flip" data-icon="star">Create an account</a></p>
<p>Have an account?<a href="#pgLogin" data-role="button" data-transition="fli" data-icon="star">Log In</a></p>
</article>
<!-- JS content at the bottom of the screen -->
</section>
<!-- END Welcome screen -->
<!-- START SignUp screen-->
<section data-role="page" data-theme="c" id="pgSignUp">
<header data-role="header" data-add-back-btn="true">
<h1>Sign Up</h1>
</header>
<article role="main" class="ui-content">
<!-- A <form> element to ask for credentials for creating an account 1:09-->
<form id="fmSignUp">
<label for="inEmailSignUp">Email:</label>
<input name="inEmailSignUp" type="email" placeholder="[email protected]" required id="inEmailSignUp">
<label for="inPasswordSignUp">Password:</label>
<input name="inPasswordSignUp" type="password" placeholder="girlreporter222" required id="inPasswordSignUp">
<label for="inPasswordConfirmSignUp">Confirm Password:</label>
<input name="inPasswordConfirmSignUp" type="password" placeholder="girlreporter222" required id="inPasswordConfirmSignUp">
<!-- Grid with two columns, get code from jQueryMobile -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" value="Clear"></div>
<div class="ui-block-b"><input type="submit" value="Go"></div>
</fieldset>
</form>
</article>
</section>
<!-- END SignUp screen-->
<!-- START LogIn screen -->
<section data-role="page" data-theme="d" id="pgLogIn">
<header data-role="header" data-transition="flip" data-add-back-btn="true">
<h1>Log In!</h1>
</header>
<article role="main" class="ui-content">
<form id="fmLogIn">
<label for="inEmailLogIn">Email:</label>
<input name="inEmailLogIn" type="email" placeholder="[email protected]" required id="inEmailLogIn">
<label for="inPasswordLogIn">Password:</label>
<input name="inPasswordLogIn" type="password" placeholder="girlreporter222" required id="inPasswordLogIn">
<!-- Grid with two columns in a form. Note FIELDSET -- which is used in a form (if it's not in a form, use DIV) -->
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" data-icon="delete" value="Clear"></div>
<div class="ui-block-b"><input type="submit" data-icon="forward" value="Go"></div>
</fieldset>
</form>
<!-- <a href="#pgHome" data-transition="flip">Go to Home</a> -->
</article>
</section>
<!-- END Login screen-->
<!-- START Home screen-->
<section data-role="page" data-theme="c" id="pgHome">
<header data-role="header">
<h1>CBDB</h1>
<a href="#pgOptions" data-icon="star" class="ui-btn-right" data-iconpos="notext" data-transition="pop">Options</a>
<nav data-role="navbar">
<ul>
<li><a href="#pgHome" data-transition="pop" data-icon="home" class="ui-btn-active ui-state-persist">Home</a></li>
<li><a href="#pgSave" data-transition="pop" data-icon="action">Save</a></li>
<li><a href="#pgView" data-transition="pop" data-icon="bars">View</a></li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<h2>Home</h2>
<img src="images/promotiger1.png" alt="promotiger1" class="imgHome">
<h4>The fun way to find your comics all in one place! Join the fun in collecting and sharing comics. Invite your friends!</h4>
<a href="#pgWelcome" data-transition="flip">Go to Welcome</a>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- END Home screen -->
<!-- START Save screen -->
<section data-role="page" data-theme="d" id="pgSave">
<header data-role="header">
<h1>Save your Comic</h1>
<a href="#pgOptions" data-icon="star" class="ui-btn-right" data-iconpos="notext" data-transition="pop">Options</a>
<nav data-role="navbar">
<ul>
<li><a href="#pgHome" data-icon="home">Home</a></li>
<li><a href="#pgSave" data-icon="action" class="ui-btn-active ui-state-persist">Save</a></li>
<li><a href="#pgView" data-icon="bars">View</a></li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<!-- <form> to save inventory to database -->
<form id="fmSaveComic">
<!-- Set up optional and required data to save -->
<fieldset>
<legend>Required</legend>
<label for="inTitleSave">Title: </label>
<input name="inTitleSave" type="text" required placeholder="Kimba the White Lion" id="inTitleSave">
<label for="inNumberSave">Number: </label>
<input name="inNumberSave" type="number" required placeholder="15" id="inNumberSave">
<label for="inYearSave">Year: </label>
<input name="inYearSave" type="number" required placeholder="1969" id="inYearSave">
</fieldset>
<fieldset>
<legend>Optional</legend>
<label for="inPublisherSave">Publisher: </label>
<input name="inPublisherSave" type="text" placeholder="Mushi Production" id="inPublisherSave">
<label for="inNotesSave">Notes: </label>
<textarea name="inNotesSave" placeholder="First published in Japan" id="inNotesSave"></textarea>
</fieldset>
<fieldset class="ui-grid-a">
<div class="ui-block-a"><input type="reset" data-icon="delete" value="Cancel"></div>
<div class="ui-block-b"><input type="submit" data-icon="forward" value="Save"></div>
</fieldset>
<!--Three column grid with setup button is below, I used 'submit' input type to keep it consistent with other buttons. This was from the assignment l
(buttons for setup, cancel and save), but the lecture suggested a more classic two-column style on 'save' page was expected so perhaps 'set-up' meant
worked fine in this form below and looked good, but I went with the class demo in code above. However, I include in this submission that I learned ho
columns, too -->
<!-- <fieldset >
<div ><input type="submit" data-icon="check" value="Set Up"></div>
<div ><input type="reset" data-icon="delete" value="Cancel"></div>
<div ><input type="submit" data-icon="forward" value="Save"></div>
</fieldset> -->
</form>
<a href="#pgView" data-role="button" data-transition="pop" data-icon="action">Go to View</a>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- End SAVE screen -->
<!-- Start VIEW screen -->
<section data-role="page" data-theme="d" id="pgView">
<header data-role="header">
<h1>View Your Comic</h1>
<a href="#pgOptions" data-icon="star" class="ui-btn-right" data-iconpos="notext" data-transition="pop">Options</a>
<nav data-role="navbar">
<ul>
<li><a href="#pgHome" data-icon="home">Home</a></li>
<li><a href="#pgSave" data-icon="action">Save</a></li>
<li><a href="#pgView" data-icon="bars" class="ui-btn-active ui-state-persist">View</a></li>
</ul>
</nav>
</header>
<article role="main" class="ui-content">
<h2>Take a look at your comic in living color!</h2>
<a href="#pgHome" data-role="button" data-transition="pop" data-icon="home" >View</a>
</article>
<footer data-role="footer" data-position="fixed">
<h4>Copyright 2021 -- Monica Showalter Productions</h4>
</footer>
</section>
<!-- End VIEW screen -->
<!-- Start OPTIONS screen -->
<section data-role="page" data-dialog="true" data-theme="c" id="pgOptions">
<header data-role="header">
<h1>Options</h1>
</header>
<article role="main" class="ui-content">
<p>A mobile app for comic book storage created by Monica Showalter in 2021. Copyright Monica Showalter Productions.</p>
<!-- Current button is a simple button but will be JavaScript eventually. Add an ID for that-->
<p><a href="#" data-role="button" data-icon="power" data-transition="pop" id="btnLogOut"></a>Log Out</p>
Contact Us | Reset Account
</article>
</section>
<!-- End OPTIONS screen -->
<!-- JavaScript should be before </body -->
<!-- Links to the online JS files-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script src="js/javascript.js"></script>
</body>
</html>
Javascript page:
// Before any of our JavaScript can function, it should be in a "device ready" function
// that Cordova detected all foundational elements have been loaded
// Listen for the moment all your files load into memory
// Then run the main function "onDeviceReady ()"
document.addEventListener("deviceready", onDeviceReady, false);
// All future JS code must be on the onDeviceReady main function
function onDeviceReady() {
console.log("Cordova is ready!");
// ---- Variables ----
// These are containers for data
// Create variables for SignUp/LogIn forms, LogOut button
// var classic way, works
// let newer way, recommended for creating Object that varies
// const newer way, recommended for creating Object that does not vary
// document.getElementByID("fmSignUp") -- means find an HTML element with that ID, pJS or plain JS way
// $("#fmSignUp") --- means same thing as above, jQuery way
const $elFmSignUp = $("#fmSignUp"), // el means 'element' of HTML. Also, use $ for const name to remind it's in jquery, as seen
$elFmLogIn = $("#fmLogIn"), // This section tells JS where to find the form so it can interact
$elBtnLogOut = $("#btnLogOut");
// ---- Functions ----
// These are the subroutines (bundles of code) that accomplish a task
// Create a function to do all the steps signing up for an account
function fnSignUp(event) {
// prevent default event of refresh
event.preventDefault();
console.log("fnSignUp(event) is running!");
let $elInEmailSignUp = $("#inEmailSignUp"),
$elInPasswordSignUp = $("#inPasswordSignUp"),
$elInPasswordConfirmSignUp = $("#inPasswordConfirmSignUp");
// Quick test to read what's in box
console.log($elInEmailSignUp.val(), $elInPasswordSignUp.val(), $elInPasswordConfirmSignUp.val());
//next slide's code goes here because we will nest objects in the function
//this is to confirm passwords match
if($elInPasswordSignUp.val() != $elInPasswordConfirmSignUp.val()) {
console.log("Passwords do not match!");
window.alert("Passwords do not match!");
//$elInPasswordSignUp.val(""); /* blanking these two lines out as don't match instructor code */
//$elInPasswordConfirmSignUp.val("");
} else {
console.log ("Passwords DO match!");
// next slide's code goes here
// Now using local storage to save User data as new account:
let $tmpValInEmailSignUp = $elInEmailSignUp.val().toUpperCase(),
$tmpValInPasswordSignUp = $elInPasswordSignUp.val();
if(localStorage.getItem($tmpValInEmailSignUp) === null) {
console.log("New User detected!");
// Now we store the new User
localStorage.setItem($tmpValInEmailSignUp, $tmpValInPasswordSignUp);
// Clear for the next User
$elFmSignUp[0].reset();
// Welcome the new User
window.alert("Welcome!");
console.log("New User saved" $tmpValInEmailSignUp);
} else {
window.alert("You already have an account!");
} // END If..Else for new/old user check
} // END If..Else for Password matching
} // END fnSignUp(event)
function fnLogIn() {
event.preventDefault();
console.log("fnLogIn() is running!"); // adjusted this to match instructor code, had word 'event' in the function ()
let $elInEmailLogIn = $("#inEmailLogIn"),
$elInPasswordLogIn = $("#inPasswordLogIn"),
$tmpValInEmailLogIn = $elInEmailLogIn.val().toUpperCase(), // added function parens toUpperCase to match instructor code
$tmpValInPasswordLogIn = $elInPasswordLogIn.val();
console.log($tmpValInEmailLogIn, $tmpValInPasswordLogIn);
// Conditional statement to see if account was previously created
if (localStorage.getItem($tmpValInEmailLogIn) === null) {
console.log("Account does not exist.");
window.alert("Account does not exist!");
} else {
console.log("Account does exist.");
if ($tmpValInPasswordLogIn === localStorage.getItem($tmpValInEmailLogIn)) {
console.log("Passwords DO match!");
$(":mobile-pagecontainer").pagecontainer("change", "#pgHome");
} else {
console.log("Passwords do not match.");
window.alert("WRONG password!");
} // END If..Else checking for password match *** CHECK THIS AGAIN, ADDED MYSELF
} // END If..Else checking for user account existence
} // END fnLogIn()
// Function to log out the User
function fnLogOut() {
console.log("fnLogOut() is running");
//Conditional Statement to confirm whether they really intend to log out
switch(window.confirm("Do you want to log out?")) {
case true:
console.log("User does want to log out");
// Move them to #pgWelcome
$(":mobile-pagecontainer").pagecontainer("change", "#pgWelcome");
// Now clear the <form> for a new User
$elFmSignUp[0].reset();
$elFmLogIn[0].reset();
break;
case false:
console.log("User does not want to log out");
break;
case "Maybe":
console.log("User might want to log out");
break;
default:
console.log("Unknown");
break;
} // END switch() to log out
} // END FnLogOut()
// ---- Event Listeners ----
// These are detecting interaction
// Wait for "submit" button in the FmSignUp <form>
// Then run a function called fnSignUp(), capture the default event, pass it through
$elFmSignUp.submit(function(){ fnSignUp(event); });
$elFmLogIn.submit(function(){ fnLogIn(); });
$elBtnLogOut.on("click", fnLogOut);
} // End onDeviceReady()
uj5u.com熱心網友回復：
在我看來，問題是由于第 30 行的拼寫而出現的：
<p>Have an account?<a href="#pgLogin" data-role="button" data-transition="flip" data-icon="star">Log In</a></p>
和參考線 61：
<section data-role="page" data-theme="d" id="pgLogIn">
如您所見，pgLogin不等于與pgLogIn，將它們更改為等于將解決問題
uj5u.com熱心網友回復：
檢查您的登錄功能，在 javascript 中它沒有事件，而在注冊時它的引數中有一個事件。這可能會有所幫助。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/381728.html
標籤：javascript html 查询 验证