我正在尝试创建一个包含10张图像的弹出窗口。仅当用户按下按钮选择其图像时，弹出窗口才应可见。我试图了解为什么当我按下按钮以查看弹出式JS引发错误
未捕获的ReferenceError：showAvatarPopup未定义 在HTMLInputElement.onclick（（index :: 420）
据我了解，此错误是由于未创建对象而导致的，但我不明白为什么未创建对象。如何解决？
var modal;
window.onload = function() {
// Get the modal
modal = document.getElementById('registrationBox');
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function validate_in() {
var userName = window.loginForm.username.value;
var password = window.loginForm.password.value;
if ((userName.length < 4) || (password.length < 6))
{
alert('user name must be at least 4 characters,\nand password must be at least 6 characters');
return false;
}
return true;
}
function validate_up() {
var firstname = document.signup.FirstName.value;
var lastname = document.signup.LastName.value;
var username = document.signup.username.value;
var email = document.signup.email.value;
var password = document.signup.psw.value;
var passwordrepeat = document.signup.psw-repeat.value;
var bday = document.signup.bday.value;
var img = document.signup.img.value;
if ((userName.length < 4))
{ְ
alert('user name must be at least 5 characters');
return false;
}
if ((password.equals(passwordrepeat)))
{
alert('Passwords are not the same');
return false;
}
if ((password.equals(passwordrepeat)))
{
alert('Passwords are not the same');
return false;
}
return true;
}
function forgetPasswordButtonClicked() {
var popup = document.getElementById("forgetPasswordPopup");
popup.classList.toggle("show");
}
function passwordRecovery() {
myWindow = window.open("https://127.0.0.1:5000/passwordRecoveryStepOne", "password recovery", "width=100, height=100,statusbar=0,menubar=0,toolbar=0");
myWindow.resizeTo(700, 550);
myWindow.focus();
}
function showAvatarPopup() {
$('.hover_bkgr_fricc').show();
}
function closeAvatarPopup() {
$('.hover_bkgr_fricc').hide();
}
function pictureChoose(pictureNumber) {
$('#photoNumber')[0].value = pictureNumber;
$('.hover_bkgr_fricc').hide();
}
/* Full-width input fields */
input[type=text], input[type=password],input[type=date],input[type=file],input[type=email] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Add a background color when the inputs get focus */
input[type=text]:focus, input[type=password]:focus,input[type=date]:focus,input[type=file]:focus,input[type=email]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
button:hover {
opacity: 1;
}
/* Extra styles for the cancel button */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Float cancel and signup buttons and add an equal width */
.cancelbtn, .signupbtn {
float: left;
width: 50%;
}
/* Add padding to container elements */
.container {
padding: 16px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: #474e5d;
padding-top: 50px;
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 5% auto 15% auto;
/* 5% from the top, 15% from the bottom and centered */
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* Style the horizontal ruler */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* The Close Button (x) */
.close {
position: absolute;
right: 35px;
top: 15px;
font-size: 40px;
font-weight: bold;
color: #f1f1f1;
}
.close:hover, .close:focus {
color: #f44336;
cursor: pointer;
}
/* Clear floats */
.clearfix::after {
content: "";
clear: both;
display: table;
}
/* Change styles for cancel button and signup button on extra small screens */
@media screen and (max-width: 300px) {
.cancelbtn, .signupbtn {
width: 100%;
}
}
/*http://i66.tinypic.com/2nndag.jpg*/
body {
margin: 0;
padding: 0;
background: url(https://www.w3schools.com/howto/img_avatar.png); /*http://i66.tinypic.com/2nndag.jpg*/
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.login-box {
width: 320px;
height: 420px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar {
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
h1 {
margin: 0;
padding: 0 0 20px;
text-align: center;
font-size: 22px;
}
.login-box p {
margin: 0;
padding: 0;
font-weight: bold;
}
.login-box input {
width: 100%;
margin-bottom: 20px;
}
.login-box input[type="text"], input[type="password"] {
border: none;
border-bottom: 1px solid #fff;
background: transparent;
outline: none;
height: 40px;
color: #fff;
font-size: 16px;
}
.login-box input[type="submit"] {
border: none;
outline: none;
height: 40px;
background: #1c8adb;
color: #fff;
font-size: 18px;
border-radius: 20px;
}
.login-box input[type="submit"]:hover {
cursor: pointer;
background: #39dc79;
color: #000;
}
.login-box a {
text-decoration: none;
font-size: 14px;
color: #fff;
}
.login-box a:hover {
color: #39dc79;
}
.button {
background-color: #f4511e;
border: none;
color: white;
padding: 16px 32px;
text-align: center;
font-size: 16px;
margin: 4px 2px;
opacity: 0.6;
transition: 0.3s;
display: inline-block;
text-decoration: none;
cursor: pointer;
}
.button:hover {opacity: 1}
/* Popup box BEGIN */
.hover_bkgr_fricc{
cursor:pointer;
display:none;
height:100%;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:10000;
}
.hover_bkgr_fricc .helper{
display:inline-block;
height:100%;
vertical-align:middle;
}
.hover_bkgr_fricc > div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
height: auto;
max-width: 551px;
min-height: 100px;
vertical-align: middle;
width: 60%;
position: relative;
border-radius: 8px;
padding: 15px 5%;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
/*
ul {
list-style: none; /* Remove list bullets */
padding: 350;
margin: 80;
}
*/
<script type="text/javascript" src="https://code.jquery.com/jquery-1.4.2.min.js"></script>
<div class="login-box">
<img src="https://www.w3schools.com/howto/img_avatar.png " class="avatar"> /*http://i64.tinypic.com/n1w8ip.jpg */
<h1>Login Here</h1>
<form action="" class="form" method="post" name="loginForm" onsubmit="return validate_in();">
<p>Username</p>
<input type="text" name="username" placeholder="Enter Username" required>
<p>Password</p>
<input type="password" name="password" placeholder="Enter Password" required>
<input type="submit" name="submit" value="Login">
<a href="#" onclick="passwordRecovery();">Forget Password</a>
<a href="#" onclick="document.getElementById('registrationBox').style.display='block'">Sign Up</a>
</form>
</div>
<div id="registrationBox" class="modal">
<span onclick="document.getElementById('registrationBox').style.display='none'" class="close" title="Close Modal">×</span>
<form class="modal-content" method="post" action="/register" name="signup" enctype="multipart/form-data>
<div class="container">
<div class="container-fluid" style = "min-height:100% width:80%">
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</div>
<h1>Sign Up to YH ch</h1>
<hr>
<label for="FirstName"><b>First name</b></label>
<input type="text" placeholder="Enter your first name" name="FirstName" required>
<label for="LastName"><b>Last name</b></label>
<input type="text" placeholder="Enter your last name" name="LastName" required>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter username" name="username" required>
<label for="email"><b>Email</b></label>
<input type="email" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<label for="Birthday"><b>Birthday:</b></label>
<input type="date" name="bday" required>
<input type="radio" name="photoSelection" value="select" onclick="showAvatarPopup();"/> Select avator
<br/>
<input type="radio" name="photoSelection" value="upload" onclick="$('#photoUpload').show();"/> Upload my own
photo
<label for="photoUpload"><b>Select avatar image:</b></label>
<input type="file" name="photoUpload" id="photoUpload" accept="image/*" style="display: none;"/>
<div class="hover_bkgr_fricc">
<span class="helper"></span>
<div>
<div class="popupCloseButton" onclick="closeAvatarPopup();">X</div>
<input type="hidden" name="photoNumber" id="photoNumber"/>
<table>
<tr>
<td><img src="https://www.w3schools.com/howto/img_avatar.png" width="100"
height="100" onclick="pictureChoose(1);"/></td>
<td><img src="https://www.w3schools.com/howto/img_avatar.png"
width="100" height="100" onclick="pictureChoose(2);"/></td>
<td><img src="https://www.w3schools.com/howto/img_avatar.png" width="100"
height="100" onclick="pictureChoose(3);"/></td>
<td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTbtWTxrQPNCQm4hmm0yvs06aGPiboCnpmOfFp-FexbvslTNG5h" width="100"
height="100" onclick="pictureChoose(4);"/></td>
<td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRNDbeyfZVxA7f9TclbDU6-MCkh60XWWF3rpF0OXvXAVshqt78h" width="100"
height="100" onclick="pictureChoose(5);"/></td>
</tr>
<tr>
<td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTL9D0dsfs2LDamDqkrMy3ckK2zVYLiC44ztxS1TI6QgPJIrvVD" width="100"
height="100" onclick="pictureChoose(6);"/></td>
<td><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSU8cqkaylj5eyFTzGTpf6LBFJAOOvpV249ASkChohmAnILcto-vQ" width="100"
height="100" onclick="pictureChoose(7);"/></td>
<td><img src="https://kiteloft.com/media/catalog/product/cache/1/image/728x/17f82f742ffe127f42dca9de82fb58b1/d/a/davedes2_1.jpg" width="100"
height="100" onclick="pictureChoose(8);"/></td>
<td><img src="https://www.dailydot.com/wp-content/uploads/617/e8/12717ea046003e9db9972177e7001e0b.jpg" width="100"
height="100" onclick="pictureChoose(9);"/></td>
<td><img src="https://www.w3schools.com/howto/img_avatar.png" width="100"
height="100" onclick="pictureChoose(10);"/></td>
</tr>
</table>
</div>
</div>
<p>By creating an account you agree to our <a href="#" style="color:dodgerblue">Terms & Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('registrationBox').style.display='none'"
class="cancelbtn">Cancel
</button>
<button type="submit" class="signupbtn" onclick="return validate_up()">Sign Up</button>
</div>
</div>
</form>
</div>
具体功能问题是
function showAvatarPopup() {
$('.hover_bkgr_fricc').show();
}
function closeAvatarPopup() {
$('.hover_bkgr_fricc').hide();
}
function pictureChoose(pictureNumber) {
$('#photoNumber')[0].value = pictureNumber;
$('.hover_bkgr_fricc').hide();
}
当我按下此按钮时它应该是打开的
<input type="radio" name="photoSelection" value="select" onclick="showAvatarPopup();"/> Select avator