We Keep Coding

Last item in for loop executes multiple times in Javascript

I'm making a JavaScript/jQuery version of a dice game my buddies and I play. Here's a 3 player version of the game:
http://codepen.io/jwnardini/pen/jmygqd
I'm trying to make a version of the game where the user can select how many players are playing, and have the game function in the same way:
http://codepen.io/jwnardini/pen/ZKLVqW
Every time the "Go" button is pressed, it's supposed to move on to the next person's turn, and I use a modular operator if condition in a for loop to check whose turn it is, so i can perform a specific action on their turn.
var turn = 0;
$(".goButton").click(function() {
turn = turn + 1;
var playerCount = $('#input-number').val();
for (i=1;i <= playerCount;i++){
if (turn % playerCount == i) {
$(".player" + i + "dollars").append("Hi!");
}
}
});
This works great for every player I've created, except the last one (player# playerCount). This is because playerCount % playerCount = 0, and i is never 0, so the last player is always skipped.
I tried to work around this with an else statement for when turn % playerCount = 0 :
var turn = 0;
$(".goButton").click(function() {
turn = turn + 1;
var playerCount = $('#input-number').val();
for (i=1;i <= playerCount;i++){
if (turn % playerCount == i) {
$(".player" + i + "dollars").append("Hi!");
} else if (turn % playerCount == 0) {
$(".player" + playerCount + "dollars").append("Hi!");
}
}
});
However, when I reach player# playerCount's turn, I get playerCount times "hi!" appended. For example, for 5 players, this is the output in browser:
Player 1
$3Hi!
Player 2
$3Hi!
Player 3
$3Hi!
Player 4
$3Hi!
Player 5
$3Hi!Hi!Hi!Hi!Hi!
Is this a classic "off by 1" error on my part? Or is my else statement flawed in some way?

The problem is your loop, when you iterate over playerCount and try to get the class name to append to.
Instead of the entire loop, try to do the following:
var m = turn % playerCount;
if (m==0) {m = playerCount};
$(".player" + m + "dollars").append("Hi!");

take out the 4th player condition outside the loop. the problem is when turn ==playercount, u dont have to enter the loop because that condiiotn is independant of i and will always be true hence hgetting executed times.
for (var i=1;i <= playerCount;i++){
if (turn % playerCount == i) {
$(".player" + i + "dollars").append("Hi!");
}
}
if (turn % playerCount == 0) {
$(".player" + playerCount + "dollars").append("Hi!");
}
here is the code working code snippet :
var turn = 0;
var pot = 0;
$("form").submit(function(event){
var i = 0
var playerCount = $('#input-number').val();
var dollarCounts = [];
$(".players").empty();
for (var i=1; i <= playerCount; i++) {
var player= "player";
player = player + i.toString();
$(".players").append(
'<div class="player-wrap"><div class="player' + i.toString() + ' clearable">Player '
+ i +
'</div>$<span class="' + player + 'dollars clearable"></span><br><br><br></div>');
dollarCounts[i] = 3;
$("." + player + "dollars").empty().append(dollarCounts[i]);
}
event.preventDefault();
});
//TURN
$(".goButton").click(function() {
turn = turn + 1;
var dice1 = Math.floor(Math.random() * 6) + 1;
var dice2 = Math.floor(Math.random() * 6) + 1;
var dice3 = Math.floor(Math.random() * 6) + 1;
$(".turn").empty().append(turn);
//Print "Left", "Right", "Center"
if (dice1 == 1) {
$(".d1").empty().append("LEFT");
}
if (dice2 == 1) {
$(".d2").empty().append("LEFT");
}
if (dice3 == 1) {
$(".d3").empty().append("LEFT");
}
if (dice1 == 2) {
$(".d1").empty().append("RIGHT");
}
if (dice2 == 2) {
$(".d2").empty().append("RIGHT");
}
if (dice3 == 2) {
$(".d3").empty().append("RIGHT");
}
if (dice1 == 3) {
$(".d1").empty().append("CENTER");
}
if (dice2 == 3) {
$(".d2").empty().append("CENTER");
}
if (dice3 == 3) {
$(".d3").empty().append("CENTER");
}
if (dice1 == 4 || dice1 == 5 || dice1 == 6) {
$(".d1").empty().append("SAFE");
}
if (dice2 == 4 || dice2 == 5 || dice2 == 6) {
$(".d2").empty().append("SAFE");
}
if (dice3 == 4 || dice3 == 5 || dice3 == 6) {
$(".d3").empty().append("SAFE");
}
var playerCount = $('#input-number').val();
for (var i=1;i < playerCount;i++){
if (turn % playerCount == i) {
$(".player" + i + "dollars").append("Hi!");
}
}
if (turn % i == 0) {
$(".player" + playerCount + "dollars").append("Hi!");
}
});
//RESET
$(".resetButton").click(function() {
turn = 0;
pot = 0;
$(".players").empty();
var playerCount = 0;
var dollarCounts = [];
$(".turn").empty().append(turn);
$(".pot").empty().append(pot);
$(".d1").empty();
$(".d2").empty();
$(".d3").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="start-form">
<label for="input-number">Number of players:</label>
<input id="input-number" type="number">
<button type="submit" class="btn">Set Player Count</button>
</form>
<button class="goButton" type="submit">Go</button>
<button class="resetButton" type="submit">Reset</button>
<br><br>
<div class="players"></div>
<h1>Turn count: <span class="turn"></span></h1>
<h2>Rolls:
<span class="d1"></span>
<span class="d2"></span>
<span class="d3"></span>
</h2>
<br>
<br>
<br>
<br>
<br>
<h1>POT</h1>
<div class="pot"></div>

Subtract from counter in JavaScript

So I have a running counter which counts from 0 to 20.000.
But what I would like to have is when a user presses a button, the timer goes back by 250.
So for example, the timer is at 350, it should go back to 100.
I tried the following code:
My timer:
var num = 0;
var max = 20000;
function resourcesCounter() {
if (num > max) {
window.clearTimeout ("tim");
}
else {
document.getElementById('wood').innerHTML = num;
document.getElementById('iron').innerHTML = num;
document.getElementById('clay').innerHTML = num;
num ++;
var tim = window.setTimeout("resourcesCounter()", 100);
}
}
resourcesCounter();
When button is pressed go back 250:
if(buildingLevel == 'Level 1' && building == 'mainBuilding') {
if(wood >= 250 && iron >= 150 && clay >= 200) {
document.getElementById('level-1').innerHTML = 'Level 2';
document.getElementById('wood').innerHTML = wood - 250;
} else {
console.log('Not enough resources');
console.log(wood + ' ' + iron + ' ' + clay);
}
}
However, this code does not work. It changes the countdown for a split second and then goes back to its original values.

I have implemented your functionality in this fiddle. Please see if it works for you:
function startTimer(){
return setInterval(function(){
var counter = document.getElementById("counter-container");
var count = parseInt(counter.textContent.trim());
count += 1;
counter.textContent = count;
}, 100);
};
var timer = startTimer();
var resetButton = document.getElementById('reset-by-250');;
resetButton.addEventListener("click", function(){
clearInterval(timer);
var counter = document.getElementById("counter-container");
var count = parseInt(counter.textContent.trim());
count -= 250;
if(count < 0){
count = 0;
}
counter.textContent = count;
timer = startTimer();
});

var num = 0;
var max = 20000;
function resourcesCounter() {
if (num > max) {
window.clearTimeout ("tim");
}
else {
document.getElementById('wood').innerHTML = num;
document.getElementById('iron').innerHTML = num;
document.getElementById('clay').innerHTML = num;
num ++;
var tim = window.setTimeout("resourcesCounter()", 100);
}
}
function clickbtn(){
num=num-250;
}
<button onclick="clickbtn()">button</button>

You are never setting num when the button is pressed. It will be used when resourcesCounter is called again.
if(buildingLevel == 'Level 1' && building == 'mainBuilding') {
if(wood >= 250 && iron >= 150 && clay >= 200) {
document.getElementById('level-1').innerHTML = 'Level 2';
// Change num so resourcesCounter() will have the updated value
num -= 250;
document.getElementById('wood').innerHTML = num;
} else {
console.log('Not enough resources');
console.log(wood + ' ' + iron + ' ' + clay);
}
}

Leap Motion: How to make swipe only trigger function once per swipe?

I am building a leap motion controlled music player, the menu system is controlled with leap motion.
Tilt up and down scrolls through menu items, right swipe selects that item, left swipe goes back up a menu level.
The issue I am having is when you swipe right on 'artist list' menu, it then changes to 'songs' menu and because the leap motion swipe gesture works on frames it triggers my function multiple times so the first song is immediately selected.
Here is relevant code:
var updateSelection = function() {
if(Math.floor(x) == x && $.isNumeric(x)){
var listLength = $(menu + ' li').size();
if (x > listLength) x = listLength;
if (x < 1) x = 1;
$(menu + ' li').removeClass('active');
$(menu + ' #' + x + artist ).addClass('active');
scrollToIt = x + artist;
idTagX = x;
if (scrollDirection == "down") {
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView();
}
else if (scrollDirection == "up"){
var topPos = document.getElementById(scrollToIt).offsetTop;
document.getElementById('cssmenu').scrollTop = topPos;
//document.getElementById(scrollToIt).scrollIntoView(true);
}
}
}
if(frame.hands.length > 0)
{
var hand = frame.hands[0];
pitchRadians = hand.pitch();
if (pitchRadians > 0.45) {
newX = x - 0.1;
x = roundNumber(newX, 2);
scrollDirection = "up";
updateSelection();
}
else if (pitchRadians < -0.45){
newX = x + 0.1;
x = roundNumber(newX, 2);
scrollDirection = "down";
updateSelection();
}
else {
x = parseInt(x);
updateSelection();
}
}
//--------------------------------------------------Swipe Selection
if (frame.gestures.length > 0) {
for (var i = 0; i < frame.gestures.length; i++) {
var gesture = frame.gestures[i];
//---- Swipe ----
if (gesture.type == "swipe") {
var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
if(isHorizontal){
if(gesture.direction[0] > 0){
$(menu + ' #' + idTagX + artist).click();
console.log(artist);
} else {
console.log("Menu Left");
// $("#" + artist).hide();
//menu = ".artists"
}
} else {
// Vertical swipe
}
}
}
}
})
This might well be a simple fix, I have just been looking at this code too long to get my head round it.

I have written a solution to this, detailed below, answering so other users can see for future reference.
var prevSwipe = "";
var d = new Date();
var now = d.getTime();
var prevSwipeTime = now;
function rightSwipe () {
d = new Date();
if(prevSwipe == "right") {
if(prevSwipeTime + 1000 < d.getTime()) { //time elapsed, run code
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log("prev == right");
} // otherwise do nothing
} else {
$(menu + ' #' + idTagX + artist).click();
prevSwipe = "right";
prevSwipeTime = d.getTime();
console.log(prevSwipeTime);
console.log("prev != right");
}
}
Hope this helps somebody!

JQuery / JavaScript Keyboard event

I have a typing speed test with a textarea and I have I paragraph split into spans. Every time the user hits space, it highlights the next span. Then I split the textarea val() and compare the two at the end. I have everything working except I cannot get the enter key to do what I want it to do. I need it to act like the space bar(in the background) and act as the enter key on screen.
$(function() {
//APPEARANCE
$('#error').hide();
$('#oldTextOne').hide();
$('#oldTextTwo').hide();
$('#oldTextThree').hide();
$('#oldTextFour').hide();
$('#oldTextFive').hide();
$('.linkBox').hover(function() {
$(this).removeClass('linkBox').addClass('linkHover');
}, function() {
$(this).removeClass('linkHover').addClass('linkBox');
});
//FUNCTIONALITY VARIABLES
var min = '5';
var sec = '00';
var realSec = 0;
var errorTest = "hasn't started yet";
var oldTextVal;
var para;
// PICK A RANDOM PARAGRAPH
function pickRandom() {
var date = new Date();
date = date.getTime();
date += '';
var dateSplit = date.split('');
var temp = dateSplit.length - 1;
var picker = dateSplit[temp];
if (picker === '0' || picker === '1') {
para = $('#oldTextOne').text();
}
else if (picker === '2' || picker === '3') {
para = $('#oldTextTwo').text();
}
else if (picker === '4' || picker === '5') {
para = $('#oldTextThree').text();
}
else if (picker === '6' || picker === '7') {
para = $('#oldTextFour').text();
}
else {
para = $('#oldTextFive').text();
}
var splitPara = para.split(' ');
for (i in splitPara) {
$('#oldTextBox').append('<span id="pw' + i + '">' + splitPara[i] + '</span> ');
}
}
pickRandom();
//FUNCTION FOR TIMER
//APPEARANCE
function show() {
$('#timer').text(min + ' : ' + sec);
}
show();
//COUNT-DOWN
var count = function() {
sec = +sec - 1;
sec += '';
realSec++;
if (+sec === -1) {
sec = '59';
min -= 1;
min += '';
}
if (sec.length === 1) {
sec = '0' + sec;
}
show();
if (sec === '00' && min === '0') {
clearInterval(run);
checkIt();
}
};
// TYPE THE TEXT INTO #TYPEDTEXTBOX
$('#pw0').addClass('green');
var lastLetter;
$('#typedTextBox').focus().keypress(function() {
if (errorTest === "hasn't started yet") {
errorTest = 'running';
run = setInterval(count, 1000);
}
//STOP ERRORS FROM PEOPLE HITTING SPACE BAR TWICE IN A ROW !!NOT WORKING IN IE8
var thisLetter = event.which;
if (lastLetter === 32 && event.which === 32) {
event.preventDefault();
}
lastLetter = thisLetter;
}).keyup(function() {
//STOP ERRORS FROM BACKSPACE NOT REGISTERING WITH KEYPRESS FUNCTION
if (event.which === 8) {
lastLetter = 8;
}
if (event.which === 13) {
?????????????????????????????????????????????
}
//SPLIT THE TYPED WORDS INTO AN ARRAY TO MATCH THE OLD TXT SPANS (TO HIGHLIGHT THE CURRENT WORD IN OLDTXT)
var typedWords = $(this).val().split(' ');
var temp = typedWords.length - 1;
var oldTemp = temp - 1;
var stopErrors = temp + 1;
$('span:nth(' + temp + ')').addClass('green');
$('span:nth(' + oldTemp + ')').removeClass('green');
$('span:nth(' + stopErrors + ')').removeClass('green');
//SCROLL
if (typedWords.length < 50) {
return;
}
else if (typedWords.length > 50 && typedWords.length < 100) {
$('#oldTextBox').scrollTop(30);
}
else if (typedWords.length > 100 && typedWords.length < 150) {
$('#oldTextBox').scrollTop(60);
}
else if (typedWords.length > 150 && typedWords.length < 200) {
$('#oldTextBox').scrollTop(90);
}
else if (typedWords.length > 200) {
$('#oldTextBox').scrollTop(120);
}
//KEEP FOCUS IN THE TYPING AREA
}).blur(function() {
if (errorTest !== 'done') {
$(this).focus();
}
});
//COMPARE
//MAKE AN ARRAY OF THE OLDTEXT
var oldWords = para.split(' ');
//FUNCTION TO DISPLAY RESULTS
var checkIt = function() {
errorTest = 'done';
var correct = 0;
var typed = $('#typedTextBox').val();
var typedWords = typed.split(' ');
$('#typedTextBox').blur();
for (i = 0; i < typedWords.length; i++) {
if (typedWords[i] === oldWords[i]) {
correct += 1;
}
}
var errors = typedWords.length - correct;
var epm = (errors / realSec) * 60;
var wpm = Math.round(( ($('#typedTextBox').val().length / 5 ) / realSec ) * 60);
var realWpm = Math.round(wpm - epm);
//SHOW RESULTS
$('#oldTextBox').html('<br><span id="finalOne">WPM : <strong>' + realWpm + ' </strong></span><span class="small">(error adjusted)</span><br><br><span id="finalTwo">You made ' + errors + ' errors </span><br><span id="finalThree">Total character count of ' + $('#typedTextBox').val().length + '</span><br><span id="finalFour">Gross WPM : ' + wpm + '</span>');
};
//STOP BUTTON APPEARANCE AND FUNCTIONALITY
$('#stop').mouseover(function() {
$(this).addClass('stopHover');
}).mouseout(function() {
$(this).removeClass('stopHover');
}).click(function() {
if (errorTest === 'running') {
checkIt();
clearInterval(run);
errorTest = 'done';
}
});
});

try this:
//ENTER KEY
if (event.which === 13) {
//event.stopPropagation(); or
event.preventDefault();
//simulate spacebar
$(window).trigger({type: 'keypress', which: 32, keyCode: 32});
}

#james - Thanks for the help. I found a better way of thinking about the problem. Instead of changing the enter key action, I changed the split function to var typedWords = typed.split(/[ \r\n]+/);

jQuery pager not working on last page

My pager works except for the last page that you click on. So if my last page is 11 that has been clicked the pager stops working when going backwards. If you click a page and then click another it works fine except for the last page. here it is on jsFiddle (its been updated and working now
Javascript:
$(document).ready(function () {
var pageIndex = 1;
function pagerControl(pageIndex, pageCount, step) {
var result = "";
if (pageCount > 1) {
var startPoint = Math.floor((pageIndex / step)) * step;
if ((pageIndex % step) == 0) {
startPoint -= step;
}
if (pageIndex < pageCount) {
result += 'Next';
}
else {
result += '<span>Next<span>';
}
//alert(startPoint);
for (var i = startPoint + 1; i <= pageCount && i <= (startPoint + step + 1); i++) {
if (i != pageIndex) {
result += '' + i + '';
}
else {
result += '<span>' + i + '</span>';
}
}
if (pageIndex > 1) {
result += 'Prev';
} else {
result += '<span>Prev</span>';
}
}
$('#pager').html(result);
$('#pager > a').click(function (e) {
reload($(e.target).attr('rel'));
e.preventDefault();
});
}
function reload(page) {
pagerControl(page, 11, 4);
}
pagerControl(1, 11, 4);
});
jsFiddle

Try this ' $('#pager a').click ' while binding click event with links instead of present ' $('#pager > a').click '.
It's working on my side. I know this isn't an elaborated answer but a quick correction.
.. :)

Sometimes we complicate things too much. How about abolish the "if" statement ... for most cases?
var pageIndex = 1;
function pagerControl(pageIndex, pageCount, step) {
var result = '';
if (pageCount > 1) {
pageIndex = (pageIndex > pageCount) ? pageCount : pageIndex;
var startPoint = Math.floor((pageIndex / step)) * step;
var endPoint = pageCount;
startPoint = (startPoint < 1) ? 1 : startPoint;
endPoint = ((startPoint + step) > pageCount) ? pageCount : (startPoint + step -1);
result = 'PREV ';
for (var i=startPoint;i<(endPoint+1);i++)
result += '' + i + '';
result += ' NEXT';
}
$('#pager').html(result);
$('#pager > a').click(function (e) {
reload(parseInt($(e.target).attr('rel')));
e.preventDefault();
});
}
function reload(page) {
pagerControl(page, 11, 4);
}
pagerControl(1, 11, 4);