我创建了一个 html 进度标签，每次单击按钮最多 5 次时我都希望更新该标签。我已经整理了代码以更新另一个来源的进度标签，但由于我是 JS 新手，我无法弄清楚如何链接按钮。任何帮助将不胜感激。这是我的javascript。
$(document).ready( function (){
$("#submit").click( function(){
$("#pro-form input").on("click",function(){
var numValid = 0;
$("#pro-form input[required]").each(function() {
if (this.validity.valid) {
numValid++;
}
});
var progress = $("#progress"),
progressMessage = $("#progress-message");
if (numValid == 0) {
progress.attr("value", "0");
progressMessage.text("The form, it wants you.");
}
if (numValid == 1) {
progress.attr("value", "20");
progressMessage.text("There you go, great start!");
}
if (numValid == 2) {
progress.attr("value", "40");
progressMessage.text("Nothing can stop you now.");
}
if (numValid == 3) {
progress.attr("value", "60");
progressMessage.text("You're basically a hero, right?");
}
if (numValid == 4) {
progress.attr("value", "80");
progressMessage.text("They are going to write songs about you.");
}
if (numValid == 5) {
progress.attr("value", "95");
progressMessage.text("SO CLOSE. PRESS THE THING.");
}
});
});
});
css
*{
box-sizing:border-box;}
body{
/* background:#333; */
background-image:url(../images/progress_grunge_background.gif);
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Sans-Serif;
font-size: 14px;
line-height: 1.4;
padding: 20px;}
#accessbox {
background-color:#006;
width:200px;
height: 100px;
position:fixed;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 5px;
border: 2px solid red;
left:190px;
top: 400px; }
form {
padding-top:10px;
padding-left:25px;
position:relative;}
input[type="text"], [type="password"], [type="submit"] {
font-family:Tahoma, Geneva, sans-serif;
background-color:#99FFFF;
margin:2px;
border:2px solid #999;}
input[type="submit"] {
margin-top:5px;
margin-left:20px; }
progress {
width:200px;
height:20px;}
.progress-wrap {
top:550px;
left:210px;
position:relative;
/* text-align: center; */
font-size: 10px;
color: red;
margin: 0 0 20px 0;
progress {
width: 100%;
margin: 0 0 5px 0;
}
}
html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="css/access.css" rel="stylesheet" type="text/css">
<script src="_js/jquery-1.9.1.min.js"></script>
<script src="_js/modernizr.js"></script>
</head>
<body>
<div class = "accessbox" id="accessbox">
<form method="post" class="login" action="">
<input type="text" class="name" id="username" placeholder="Username" name="username" />
<input type="password" class="pass" placeholder="Password" name="password"/>
<input type="submit" name="submit" class="submit" id="submit">
<script src="js/progress_1.js"></script>
</form>
</div>
<div class="progress-wrap">
<progress max="100" value="0" id="progress"></progress>
<div class="progress-message" id="progress-message">The form, it wants you.</div>
<!--script src="js/progress.js"></script-->
</div>
</body>
</html>