我正在尝试创建一个登录页面，该页面转到应用程序的主页，但按钮根本不会点击，就像一堵墙。我有
Posted
技术标签:
【中文标题】我正在尝试创建一个登录页面，该页面转到应用程序的主页，但按钮根本不会点击，就像一堵墙。我有【英文标题】：I am trying to create a login page that goes to a home page on an app, but the button will not click at all, it's like a wall. I have 【发布时间】：2022-01-16 04:07:27 【问题描述】：我是一个非常新的程序员，正在尝试构建我的第一个应用程序。我创建了一个登录页面，但似乎有什么东西阻止了它。我不确定为什么它不起作用，可能是一个小错误还是其他原因？我的注册页面工作正常，但登录甚至没有点击。谁能帮忙找出我的代码中可能出现的错误？
<!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" 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="loislane@dailyplanet.com" 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="loislane@dailyplanet.com" 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" 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 class="ui-grid-b">
<div class="ui-block-a"><input type="submit" data-icon="check" value="Set Up"></div>
<div class="ui-block-b"><input type="reset" data-icon="delete" value="Cancel"></div>
<div class="ui-block-c"><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()
【问题讨论】：
【参考方案1】：在我看来，问题是因为第 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，将它们更改为等于将解决问题
【讨论】：
天哪，它有效！那一个确实是错过了。我更正了它，它第一次起作用了！非常感谢！【参考方案2】：检查您的登录功能，在 javascript 中它没有事件，而在注册时它的参数中有一个事件。这可能会有所帮助。
【讨论】：
您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。 非常感谢，接下来我会看看这个。以上是关于我正在尝试创建一个登录页面，该页面转到应用程序的主页，但按钮根本不会点击，就像一堵墙。我有的主要内容，如果未能解决你的问题，请参考以下文章
如果“SignInWithFacebook”不再可用，我该如何创建一个带有firebase的facebook登录页面？