Soda
Reputation: 67
When I click on next button page number ascending by unknown order.
I'm creating simple survey and as I said, when I select language, and clicking on "next", page number ascending by unknown order. I cant find where error is. Logic of ascending is pretty random.
Can some one help me?
$(document).ready(function(){
// Declare main variables
var step = 0, runed = false;
var db = [{
question: "Question 1"
},{
question: "Question 2"
},{
question: "Question 3"
},{
question: "Question 4"
},{
question: "Question 5"
},{
question: "Question 6"
},{
question: "Question 7"
}];
var tot = db.length;
var lang;
function reStep() {
$('.pg .tot').html(tot);
$('.pg .cur').html(step);
if(step == 0) {
$('footer').hide();
} else {
$('footer').show();
}
run();
};
function next() {
step++;
reStep();
};
function run() {
if(step == 0) {
// First step handler
runed = true;
$('[step=' + step + '] a').click(function(){
lang = $(this).attr('data');
$(this).parent().fadeOut(300);
next();
});
} else if(step > db.length) {
// Question handler
} else {
// Result handler
console.log(step);
$('.qstripe p').fadeOut();
$('.qstripe h1').html(db[step - 1].question)
$('#next').click(function() {
next();
});
};
};
if(!runed) {
reStep();
}
});html, body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
}
html {
background: url('../img/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
margin: 0;
padding: 0;
}
.pull {
float: left;
}
.pulr {
float: right;
}
.clr {
clear: both;
}
.green {
background: #8cc73f;
}
.blue {
background: #29aae1;
}
header {
background: url("../img/logo.png") center center no-repeat;
background-size: 100% auto;
width: 400px;
height: 133px;
margin: 25px auto 0;
}
.survey {
margin: 25px auto 0;
}
.qstripe {
margin-bottom: 35px;
line-height: 70px;
}
.qstripe h1 {
color: #FFFFFF;
font-size: 2em;
text-align: center;
background: #29aae1;
}
.qstripe p {
padding-top: 20px;
color: #2c2c2c;
font-size: 1.7em;
line-height: 1.7em;
text-align: center;
}
.qstripe p span {
display: block;
}
.ans {
margin: 0 auto;
width: 768px;
text-align: center;
}
.ans .an {
display: inline-block;
vertical-align: top;
margin: 10px;
padding: 10px 20px;
width: 225px;
line-height: 30px;
font-size: 1.1em;
text-align: center;
border-radius: 8px;
background: #29aae1;
color: white;
cursor: pointer;
}
footer {
padding-bottom: 20px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
footer .btns {
margin: auto;
max-width: 768px;
}
footer a {
display: inline-block;
font-size: 1.1em;
width: 225px;
height: 30px;
border-radius: 8px;
padding: 10px;
margin: auto;
text-align: center;
color: white;
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 20px;
cursor: pointer;
}
footer a .back {
margin-left: 30px;
}
footer .prog-b {
margin: 40px auto 30px;
max-width: 768px;
position: relative;
height: 10px;
}
footer .prog-b i {
display: block;
position: absolute;
width: 30px;
height: 30px;
left: 30%;
margin-top: -10px;
border-radius: 50px;
}
footer .pg {
text-align: center;
color: #29aae1;
font-size: 2em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Key For Care</title>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<header></header>
<div class="survey">
<div class="qstripe">
<h1>We want to improve!</h1>
<p>
SELECT LANGUAGE FIRST
</p>
</div>
<div class="ans">
<div step="0">
<a class="an" data="sv">SVENSKA</a>
<a class="an" data="en">ENGLISH</a>
<a class="an" data="so">SOOMAALI</a>
<a class="an" data="ar">العربية</a>
</div>
</div>
<footer>
<div class="btns">
<a class="pull blue" id="prev">Back</a>
<a class="pulr green" id="next">Next</a>
</div>
<div class="clr"></div>
<div class="prog-b green">
<i class="blue"></i>
</div>
<div class="pg">
<span class="cur"></span>/<span class="tot"></span>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>Upvotes: 2
Views: 52
Answers (2)
Soda
Reputation: 67
Fixed!
$(document).ready(function(){
// Declare main variables
var step = 0, runed = false;
var db = [{
question: "Question 1"
},{
question: "Question 2"
},{
question: "Question 3"
},{
question: "Question 4"
},{
question: "Question 5"
},{
question: "Question 6"
},{
question: "Question 7"
}];
var tot = db.length;
var lang;
function reStep() {
$('.pg .tot').html(tot);
$('.pg .cur').html(step);
if(step == 0) {
$('footer').hide();
} else {
$('footer').show();
}
run();
};
function next() {
step++;
reStep();
};
function run() {
if(step == 0) {
// First step handler
runed = true;
$('[step=' + step + '] a').click(function(){
lang = $(this).attr('data');
$(this).parent().fadeOut(300);
next();
});
} else if(step > db.length) {
// Question handler
} else {
// Result handler
console.log(step);
$('.qstripe p').fadeOut();
$('.qstripe h1').html(db[step - 1].question)
};
};
if(!runed) {
reStep();
}
$('#next').click(function() {
next();
});
});html, body {
font-family: 'Nunito', sans-serif;
font-weight: 100;
}
html {
background: url('../img/bg.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
* {
margin: 0;
padding: 0;
}
.pull {
float: left;
}
.pulr {
float: right;
}
.clr {
clear: both;
}
.green {
background: #8cc73f;
}
.blue {
background: #29aae1;
}
header {
background: url("../img/logo.png") center center no-repeat;
background-size: 100% auto;
width: 400px;
height: 133px;
margin: 25px auto 0;
}
.survey {
margin: 25px auto 0;
}
.qstripe {
margin-bottom: 35px;
line-height: 70px;
}
.qstripe h1 {
color: #FFFFFF;
font-size: 2em;
text-align: center;
background: #29aae1;
}
.qstripe p {
padding-top: 20px;
color: #2c2c2c;
font-size: 1.7em;
line-height: 1.7em;
text-align: center;
}
.qstripe p span {
display: block;
}
.ans {
margin: 0 auto;
width: 768px;
text-align: center;
}
.ans .an {
display: inline-block;
vertical-align: top;
margin: 10px;
padding: 10px 20px;
width: 225px;
line-height: 30px;
font-size: 1.1em;
text-align: center;
border-radius: 8px;
background: #29aae1;
color: white;
cursor: pointer;
}
footer {
padding-bottom: 20px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
footer .btns {
margin: auto;
max-width: 768px;
}
footer a {
display: inline-block;
font-size: 1.1em;
width: 225px;
height: 30px;
border-radius: 8px;
padding: 10px;
margin: auto;
text-align: center;
color: white;
font-family: 'Nunito', sans-serif;
font-weight: 100;
font-size: 20px;
cursor: pointer;
}
footer a .back {
margin-left: 30px;
}
footer .prog-b {
margin: 40px auto 30px;
max-width: 768px;
position: relative;
height: 10px;
}
footer .prog-b i {
display: block;
position: absolute;
width: 30px;
height: 30px;
left: 30%;
margin-top: -10px;
border-radius: 50px;
}
footer .pg {
text-align: center;
color: #29aae1;
font-size: 2em;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Key For Care</title>
<link href='https://fonts.googleapis.com/css?family=Nunito:400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>
<header></header>
<div class="survey">
<div class="qstripe">
<h1>We want to improve!</h1>
<p>
SELECT LANGUAGE FIRST
</p>
</div>
<div class="ans">
<div step="0">
<a class="an" data="sv">SVENSKA</a>
<a class="an" data="en">ENGLISH</a>
<a class="an" data="so">SOOMAALI</a>
<a class="an" data="ar">العربية</a>
</div>
</div>
<footer>
<div class="btns">
<a class="pull blue" id="prev">Back</a>
<a class="pulr green" id="next">Next</a>
</div>
<div class="clr"></div>
<div class="prog-b green">
<i class="blue"></i>
</div>
<div class="pg">
<span class="cur"></span>/<span class="tot"></span>
</div>
</footer>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="static/js/app.js"></script>
</body>
</html>Upvotes: 0
Sumeet
Reputation: 36
That is because you are binding click event in your "run" function again and again til it reach to total count of db size. So try to bind click only once so it will perform event only once at time. You can try to remove click event first where you binding click event in "run" function with ".unbind()" event.
Upvotes: 2
Related Questions
- Trigger a button click with JavaScript on the Enter key in a text box
- Creating a score that will go up every time a correct answer is selected
- How can I apply SmartyStreets validation to two forms in the same page?
- how to add this jquery script in to wordpress website
- jQuery UI resizable changes height when resizing width
- Jquery ui tools - tab panes all showing at once