Betfair like Odds increment and decrement - javascript

Please help me it is very irritating. Don't know why my logic is failed every time.
I am trying to make Betfair like odds increment in my web project. Betfair have it's own price group which can be found here
LINK: https://api.developer.betfair.com/services/webapps/docs/display/1smk3cen4v3lu3yomq5qye0ni/Betfair+Price+Increments
Here is explanation:
if odds is 1.01 and some body want to increase that odds via html5 number spinner the increment will be 0.01 and if odds is 2 the increment will be 0.02. whole increment list is available in that link.
working example can be found in betfair's betslip.
here is my Javascript:
function getIncremantal(fval) {
var val = parseFloat(fval);
var step;
if (val <= 1.99) {
step = 0.01;
} else if (val > 2 && val < 3) {
step = 0.02;
} else if (val > 3 && val < 4) {
step = 0.05;
} else if (val > 4 && val < 6) {
step = 0.1;
} else if (val > 6 && val < 10) {
step = 0.2;
} else if (val > 10 && val < 19.5) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
Update: jsFiddle
http://jsfiddle.net/71fs0a67/1/


I tried the following which is not using number stepping, but if you use the buttons it does work. It is an alternate solution, sorry if its not what you are looking for.
HTML:
<input type="number" min="1.01" max="1000" id="num"/>
<button class="increment">+</button>
<button class="decrement">-</button>
Javascript:
$('.increment').on('click', function() {
var elem = $('#num');
var value = parseFloat(elem.val());
var result = +(value + getIncremantal(value)).toFixed(2);
elem.val(result);
});
$('.decrement').on('click', function() {
var elem = $('#num');
var value = parseFloat(elem.val());
var result = +(value - getDecremantal(value)).toFixed(2);
elem.val(result);
});
function getIncremantal(val) {
var step;
if (val < 2) {
step = 0.01;
} else if (val >= 2 && val < 3) {
step = 0.02;
} else if (val >= 3 && val < 4) {
step = 0.05;
} else if (val >= 4 && val < 6) {
step = 0.1;
} else if (val >= 6 && val < 10) {
step = 0.2;
} else if (val >= 10 && val < 20) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
function getDecremantal(val) {
var step;
if (val <= 2) {
step = 0.01;
} else if (val > 2 && val <= 3) {
step = 0.02;
} else if (val > 3 && val <= 4) {
step = 0.05;
} else if (val > 4 && val <= 6) {
step = 0.1;
} else if (val > 6 && val <= 10) {
step = 0.2;
} else if (val > 10 && val <= 20) {
step = 0.5;
} else if (val > 20 && val <= 30) {
step = 1;
} else if (val > 30 && val <= 50) {
step = 2;
} else if (val > 50 && val <= 100) {
step = 5;
} else if (val > 100 && val <= 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
http://jsfiddle.net/71fs0a67/7/
With jquery ui spinner, you can do something like this:
$( "#spinner" ).spinner({
min: 1.01,
max: 1000,
step: 0.01,
spin: function( event, ui ) {
event.preventDefault();
event.stopPropagation();
var value = this.value || ui.value;
value = parseFloat(value);
var step;
if ($(event.currentTarget).hasClass('ui-spinner-up')) {
step = getIncremantal(value);
value = +(value + step).toFixed(2);
$( "#spinner" ).spinner('value', value);
} else {
step = getDecremantal(value);
value = +(value - step).toFixed(2);
$( "#spinner" ).spinner('value', value);
}
}
});
http://jsfiddle.net/71fs0a67/9/


Your code will return undefined for whole numbers.
Change all instances of val > number to val >= number


Try this:
function getIncremantal(fval) {
var val = parseFloat(fval);
var step;
if (val < 2) {
step = 0.01;
} else if (val >= 2 && val < 3) {
step = 0.02;
} else if (val >= 3 && val < 4) {
step = 0.05;
} else if (val >= 4 && val < 6) {
step = 0.1;
} else if (val >= 6 && val < 10) {
step = 0.2;
} else if (val >= 10 && val < 20) {
step = 0.5;
} else if (val >= 20 && val < 30) {
step = 1;
} else if (val >= 30 && val < 50) {
step = 2;
} else if (val >= 50 && val < 100) {
step = 5;
} else if (val >= 100 && val < 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}
function getDecremantal(fval) {
var val = parseFloat(fval);
var step;
if (val <= 2) {
step = 0.01;
} else if (val > 2 && val <= 3) {
step = 0.02;
} else if (val > 3 && val <= 4) {
step = 0.05;
} else if (val > 4 && val <= 6) {
step = 0.1;
} else if (val > 6 && val <= 10) {
step = 0.2;
} else if (val > 10 && val <= 20) {
step = 0.5;
} else if (val > 20 && val <= 30) {
step = 1;
} else if (val > 30 && val <= 50) {
step = 2;
} else if (val > 50 && val <= 100) {
step = 5;
} else if (val > 100 && val <= 1000) {
step = 10;
} else if (val > 1000) {
step = null;
}
return step;
}

Related

Range slider next and prev values always going to next value when moving

I write a code for range slider with some specific range values
[1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,21000,22000,23000,24000, 25000,30000,35000,40000,45000, 50000, 60000,70000, 80000, 90000, 100000]
but when I move the slider curser in-between 4000-5000 for example 4320 it always goes to 5000 in-fact I want to move it on 4000 when moving slider to backword.
Also background-color behaving weirdly due to slider jumps.
this is how my JS looks like:
const slider = document.getElementById("myinput")
const min = parseInt(slider.min)
const max = parseInt(slider.max)
const value = parseInt(slider.value)
slider.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(value-min)/(max-min)*100}%, #596680 ${(value-min)/(max-min)*100}%, #596680 100%)`
slider.oninput = function() {
this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`
};
//
var arr = [1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,21000,22000,23000,24000, 25000,30000,35000,40000,45000, 50000, 60000,70000, 80000, 90000, 100000];
var ele = document.querySelector('.slider')
ele.setAttribute('step', arr[0]);
var i = 0;
function a() {
ele.removeAttribute('step')
var value = ele.value
for (i = 0; i < arr.length; i++) {
if (arr[i] > value) {
ele.value = arr[i]
break;
}
}
document.querySelector('span').innerHTML = ele.value
}
//
// Add a change event listener to the range slider
slider.addEventListener('change', function() {
// Get the value of the range slider
var value = parseInt(this.value);
var container = document.querySelector('#rangeValue');
let cost;
if (value === 1000) {
cost = 0.0350;
} else if (value > 1000 && value <= 2000) {
cost = 0.0340;
} else if (value > 2000 && value <= 3000) {
cost = 0.0329;
} else if (value > 3000 && value <= 4000) {
cost = 0.0319;
} else if (value > 4000 && value <= 5000) {
cost = 0.031;
} else if (value > 5000 && value <= 6000) {
cost = 0.0301;
} else if (value > 6000 && value <= 7000) {
cost = 0.0292;
} else if (value > 7000 && value <= 8000) {
cost = 0.0283;
} else if (value > 8000 && value <= 9000) {
cost = 0.0274;
} else if (value > 9000 && value <= 10000) {
cost = 0.0266;
} else if (value > 10000 && value <= 11000) {
cost = 0.0258;
} else if (value > 11000 && value <= 12000) {
cost = 0.025;
} else if (value > 12000 && value <= 13000) {
cost = 0.0243;
} else if (value > 13000 && value <= 14000) {
cost = 0.0236;
} else if (value > 14000 && value <= 15000) {
cost = 0.0228;
} else if (value > 15000 && value <= 16000) {
cost = 0.0222;
} else if (value > 16000 && value <= 17000) {
cost = 0.0215;
} else if (value > 17000 && value <= 18000) {
cost = 0.0209;
} else if (value > 18000 && value <= 19000) {
cost = 0.0202;
} else if (value > 19000 && value <= 20000) {
cost = 0.0196;
} else if (value > 20000 && value <= 21000) {
cost = 0.019;
} else if (value > 21000 && value <= 22000) {
cost = 0.0185;
} else if (value > 22000 && value <= 23000) {
cost = 0.0179;
} else if (value > 23000 && value <= 24000) {
cost = 0.0174;
} else if (value > 24000 && value <= 25000) {
cost = 0.0168;
} else if (value > 25000 && value <= 30000) {
cost = 0.0163;
} else if (value > 30000 && value <= 35000) {
cost = 0.0159;
} else if (value > 35000 && value <= 40000) {
cost = 0.0154;
} else if (value > 40000 && value <= 45000) {
cost = 0.0149;
} else if (value > 45000 && value <= 50000) { //check
cost = 0.0145;
} else if (value > 50000 && value <= 60000) {
cost = 0.014;
} else if (value > 60000 && value <= 70000) {
cost = 0.0136;
} else if (value > 70000 && value <= 80000) {
cost = 0.0132;
} else if (value > 80000 && value <= 90000) {
cost = 0.0128;
} else if (value > 90000 && value <= 100000) {
cost = 0.0124;
}
var totval = value * cost;
totval = totval.toFixed(2);
container.innerHTML = totval;
// Print the value to the console
// console.log(value);
});
const
range = document.getElementById('myinput'),
rangeV = document.getElementById('rangeV'),
setValue = () => {
const
newValue = Number((range.value - range.min) * 100 / (range.max - range.min)),
newPosition = 10 - (newValue * 0.2);
rangeV.innerHTML = `<span>${range.value}</span>`;
rangeV.style.left = `calc(${newValue}% + (${newPosition}px))`;
};
document.addEventListener("DOMContentLoaded", setValue);
range.addEventListener('input', setValue);
JSFIDDLE of all the code

I found the solution to my problem.
This code will set the value of the slider to the nearest value in the array when the user moves the slider. It will also maintain the slider value when moving backward.
It also removes the unnecessary variable assignments and the for loop that was causing the background color to jump.
const slider = document.getElementById("myinput");
slider.oninput = function() {
this.style.background = `linear-gradient(to right, #0080FF 0%, #0080FF ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 ${(this.value-this.min)/(this.max-this.min)*100}%, #596680 100%)`;
};
// Add a change event listener to the range slider
slider.addEventListener('change', function() {
// Get the value of the range slider
var value = parseInt(this.value);
var container = document.querySelector('#rangeValue');
// Set the value of the slider to the nearest value in the array
var arr = [1000,2000,3000,4000,5000,6000,7000,8000,9000,10000,11000,12000,13000,14000,15000,16000,17000,18000,19000,20000,21000,22000,23000,24000, 25000,30000,35000,40000,45000, 50000, 60000,70000, 80000, 90000, 100000];
var nearest = arr.reduce(function (prev, curr) {
return (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev);
});
if (value < nearest) {
nearest = arr[arr.indexOf(nearest) - 1];
}
this.value = nearest;
// display the value on the slider
document.querySelector('span').innerHTML = this.value;
});

How to set custom step input value?

I need to change the step according to input number value but it does not work right. If the value is 20 step is 2 but it gives 21, 23, 25... instead of 22, 24, 26... Why? How can I solve it?
$(function() {
$('#points').on('input change', function() {
var element = $('#points'),
deger = element.val(),
adim;
// Set rules here
if (deger < 20) {
adim = 1;
} else if (deger >= 20 && deger < 50) {
adim = 2;
} else if (deger >= 50 && deger < 100) {
adim = 5;
} else if (deger >= 100 && deger < 200) {
adim = 10;
} else {
adim = 50;
}
element.attr('step', adim);
$('#deger').text(deger);
$('#adim').text(adim);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<div>
Value: <span id="deger"></span>
</div>
<div>
Current step: <span id="adim"></span>
</div>
<div>
<input id="points" type="number" step="4" value="12" min="1" max="10000" />
</div>

Apparently, the problem is the min attribute. Since you have min="1" when you are at 20 it goes first on 21 (because min is 1) and then starts with the correct step.
To solve simply update the min attribute also.
element.attr('step', adim);
element.attr('min', adim);
With this you can go backwards
$(function() {
var adim;
$('#points').on('input', function() {
var element = $('#points'),
deger = element.val()
// Set rules here
if (deger < 20) {
adim = 1;
} else if (deger == 20) {
adim = adim === 2 ? 1 : 2;
} else if (deger == 50) {
adim = adim == 5 ? 2 : 5;
} else if (deger == 100) {
adim = adim == 10 ? 5 : 10;
} else if (deger == 200) {
adim = adim == 50 ? 10 : 50;
}
element.attr('step', adim);
element.attr('min', adim);
$('#deger').text(deger);
$('#adim').text(adim);
});
});

Javascript Function Parameter Update

I am running into a problem here trying to create a product showcase. Here is my Javascript code: http://codeshare.io/MeJQi
The slider for this code is for is here live at: http://therrd.com/screening.html#tenant-Screening
I can land on this specific page in two ways. One way is a button on another page that changes the default FROM of the slider to land on 15 Units which shows "Product25". Then the other way of landing on this page is where the slider is on default start value of 30 Unit and shows "Product1".
The problem I am having is changing the default product when I land on this page by clicking on the button on the other page, the slider updates but the showing product does not.
I would like to change the default value for the showProduct() based on the slider.
<script>
$(function() {
init();
});
function init()
{
hideAllProducts();
showProduct(1);
vals = {max: 2000, min: 1, def: 20} //use your own values here for max min and def
var param = window.location.href.split("slide=");
slide = isNaN(param[param.length - 1]) ||
param[param.length - 1] > vals.max ||
param[param.length - 1] < vals.min ? vals.def : param[param.length - 1];
//check if there is a url param, if it's a number and if it's in range
$("#screeningSlider").ionRangeSlider({
hide_min_max: true,
keyboard: true,
from: slide,
min: 1,
max: 2000,
step: 0,
grid_num: 4,
prettify_separator: ",",
postfix: " Units",
max_postfix: "+",
force_edges: true,
onStart: function (value) {
document.getElementById("value").innerHTML = (value.from);
},
onChange: function (value) {
document.getElementById("value").innerHTML = (value.from);
},
onFinish: function (value) {
document.getElementById("value").innerHTML = (value.from);
},
onUpdate: function (value) {
document.getElementById("value").innerHTML = (value.from);
}
});
$("#screeningSlider").on("change", function () {
var $this = $(this),
value = $this.prop("value");
productSliderOnChange(value);
});
}
function productSliderOnChange(value)
{
$("#value").text(value);
if(value == 0)
hideAllProducts();
else if ((value > 0) && (value <= 20))
{
hideAllProducts();
showProduct(25);
}
else if ((value >= 21) && (value <= 60))
{
hideAllProducts();
showProduct(1);
}
else if ((value >= 61) && (value <= 120))
{
hideAllProducts();
showProduct(2);
}
else if ((value >= 121) && (value <= 180))
{
hideAllProducts();
showProduct(3);
}
else if ((value >= 181) && (value <= 360))
{
hideAllProducts();
showProduct(4);
}
else if ((value >= 361) && (value <= 580))
{
hideAllProducts();
showProduct(5);
}
else if ((value >= 581) && (value <= 780))
{
hideAllProducts();
showProduct(6);
}
else if ((value >= 781) && (value <= 980))
{
hideAllProducts();
showProduct(7);
}
else if ((value >= 981) && (value <= 1180))
{
hideAllProducts();
showProduct(8);
}
else if ((value >= 1181) && (value <= 1380))
{
hideAllProducts();
showProduct(9);
}
else if ((value >= 1381) && (value <= 1580))
{
hideAllProducts();
showProduct(10);
}
else if ((value >= 1581) && (value <= 1780))
{
hideAllProducts();
showProduct(11);
}
else if ((value >= 1781) && (value <= 1980))
{
hideAllProducts();
showProduct(12);
}
else if ((value > 1981))
{
hideAllProducts();
showProduct(13);
}
else {
hideAllProducts();
showProduct(1);
}
}
function hideAllProducts()
{
$("#Product25").hide();
$("#Product1").hide();
$("#Product2").hide();
$("#Product3").hide();
$("#Product4").hide();
$("#Product5").hide();
$("#Product6").hide();
$("#Product7").hide();
$("#Product8").hide();
$("#Product9").hide();
$("#Product10").hide();
$("#Product11").hide();
$("#Product12").hide();
$("#Product13").hide();
}
function showProduct(productId)
{
var product = "#Product" + productId;
$(product).show();
}
</script>

Running into "Maximum call stack" errors on a recursive function

I'm making a height map editor. Basically its a grid of numbers where you can change any location by +/- 1. The editor then makes sure that there can only be a difference of 1 between any of the touching 8 tiles.
I'm doing this with a recursive function. Basically its looking at it's 8 neighbors and adjusting them as needed. If any where adjusted, call the function on all 8 neighbors.
I get Uncaught RangeError: Maximum call stack size exceeded errors after messing around for awhile and I can't see where they are coming from. I'm doing checks to make sure I don't try to access non-exsiting grid locations...
The function is this:
var moveDown = function (x, y) {
var updated = false;
if (x-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y]) > 1) {
grid[x-1][y] -= 1;
updated = true;
}
if (x-1 < size && Math.abs(grid[x][y] - grid[x+1][y]) > 1) {
grid[x+1][y] -= 1;
updated = true;
}
if (y-1 >= 0 && Math.abs(grid[x][y] - grid[x][y-1]) > 1) {
grid[x][y-1] -= 1;
updated = true;
}
if (y+1 < size && Math.abs(grid[x][y] - grid[x][y+1]) > 1) {
grid[x][y+1] -= 1;
updated = true;
}
if (x-1 >= 0 && y-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y-1]) > 1) {
grid[x-1][y-1] -= 1;
updated = true;
}
if (x-1 >= 0 && y+1 < size && Math.abs(grid[x][y] - grid[x-1][y+1]) > 1) {
grid[x-1][y+1] -= 1;
updated = true;
}
if (x+1 < size && y-1 >= 0 && Math.abs(grid[x][y] - grid[x+1][y-1]) > 1) {
grid[x+1][y-1] -= 1;
updated = true;
}
if (x+1 < size && y+1 < size && Math.abs(grid[x][y] - grid[x+1][y+1]) > 1) {
grid[x+1][y+1] -= 1;
updated = true;
}
if (updated) {
if (x-1 >= 0) { moveDown(x-1, y); }
if (x+1 < size) { moveDown(x+1, y); }
if (y-1 >= 0) { moveDown(x, y-1); }
if (y+1 < size) { moveDown(x, y+1); }
if (x-1 >= 0 && y-1 >= 0) { moveDown(x-1, y-1); }
if (x-1 >= 0 && y+1 < size) { moveDown(x-1, y+1); }
if (x+1 < size && y-1 >= 0) { moveDown(x+1, y-1); }
if (x+1 < size && y+1 < size) { moveDown(x+1, y+1); }
}
}
I have a fiddle here. And it looks like I can just inline it, so I did that too.
var size = 15
var grid;
var active = {x: -1, y: -1};
var moveDown = function (x, y) {
var updated = false;
if (x-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y]) > 1) {
grid[x-1][y] -= 1;
updated = true;
}
if (x-1 < size && Math.abs(grid[x][y] - grid[x+1][y]) > 1) {
grid[x+1][y] -= 1;
updated = true;
}
if (y-1 >= 0 && Math.abs(grid[x][y] - grid[x][y-1]) > 1) {
grid[x][y-1] -= 1;
updated = true;
}
if (y+1 < size && Math.abs(grid[x][y] - grid[x][y+1]) > 1) {
grid[x][y+1] -= 1;
updated = true;
}
if (x-1 >= 0 && y-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y-1]) > 1) {
grid[x-1][y-1] -= 1;
updated = true;
}
if (x-1 >= 0 && y+1 < size && Math.abs(grid[x][y] - grid[x-1][y+1]) > 1) {
grid[x-1][y+1] -= 1;
updated = true;
}
if (x+1 < size && y-1 >= 0 && Math.abs(grid[x][y] - grid[x+1][y-1]) > 1) {
grid[x+1][y-1] -= 1;
updated = true;
}
if (x+1 < size && y+1 < size && Math.abs(grid[x][y] - grid[x+1][y+1]) > 1) {
grid[x+1][y+1] -= 1;
updated = true;
}
if (updated) {
if (x-1 >= 0) { moveDown(x-1, y); }
if (x+1 < size) { moveDown(x+1, y); }
if (y-1 >= 0) { moveDown(x, y-1); }
if (y+1 < size) { moveDown(x, y+1); }
if (x-1 >= 0 && y-1 >= 0) { moveDown(x-1, y-1); }
if (x-1 >= 0 && y+1 < size) { moveDown(x-1, y+1); }
if (x+1 < size && y-1 >= 0) { moveDown(x+1, y-1); }
if (x+1 < size && y+1 < size) { moveDown(x+1, y+1); }
}
}
var moveUp = function (x, y) {
var updated = false;
if (x-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y]) > 1) {
grid[x-1][y] += 1;
updated = true;
}
if (x-1 < size && Math.abs(grid[x][y] - grid[x+1][y]) > 1) {
grid[x+1][y] += 1;
updated = true;
}
if (y-1 >= 0 && Math.abs(grid[x][y] - grid[x][y-1]) > 1) {
grid[x][y-1] += 1;
updated = true;
}
if (y+1 < size && Math.abs(grid[x][y] - grid[x][y+1]) > 1) {
grid[x][y+1] += 1;
updated = true;
}
if (x-1 >= 0 && y-1 >= 0 && Math.abs(grid[x][y] - grid[x-1][y-1]) > 1) {
grid[x-1][y-1] += 1;
updated = true;
}
if (x-1 >= 0 && y+1 < size && Math.abs(grid[x][y] - grid[x-1][y+1]) > 1) {
grid[x-1][y+1] += 1;
updated = true;
}
if (x+1 < size && y-1 >= 0 && Math.abs(grid[x][y] - grid[x+1][y-1]) > 1) {
grid[x+1][y-1] += 1;
updated = true;
}
if (x+1 < size && y+1 < size && Math.abs(grid[x][y] - grid[x+1][y+1]) > 1) {
grid[x+1][y+1] += 1;
updated = true;
}
if (updated) {
if (x-1 >= 0) { moveUp(x-1, y); }
if (x+1 < size) { moveUp(x+1, y); }
if (y-1 >= 0) { moveUp(x, y-1); }
if (y+1 < size) { moveUp(x, y+1); }
if (x-1 >= 0 && y-1 >= 0) { moveUp(x-1, y-1); }
if (x-1 >= 0 && y+1 < size) { moveUp(x-1, y+1); }
if (x+1 < size && y-1 >= 0) { moveUp(x+1, y-1); }
if (x+1 < size && y+1 < size) { moveUp(x+1, y+1); }
}
}
var init = function () {
$('#board').mouseleave(function () {
active.x = -1;
active.y = -1;
})
.mousemove(function () {
active.x = -1;
active.y = -1;
});
$('#reset').click(function () {
for(var x=0; x<size; x++) {
for(var y=0; y<size; y++) {
grid[x][y] = 1;
}
}
});
$(window).keydown(function (e) {
if (e.keyCode === 119 || e.keyCode === 87) {
// W
grid[active.x][active.y] += 1;
moveUp(active.x, active.y);
}
if (e.keyCode === 115 || e.keyCode === 83) {
// S
grid[active.x][active.y] -= 1;
moveDown(active.x, active.y);
}
});
grid = [];
for(var x=0; x<size; x++) {
grid[x] = [];
var row = $('<div class="row">');
for(var y=0; y<size; y++) {
grid[x][y] = 1;
var cell = $('<div id="C' + x + '_' + y + '" class="cell">');
cell.data('x', x).data('y', y);
cell.mousemove(function (e) {
var $this = $(this);
active.x = $this.data('x');
active.y = $this.data('y');
e.stopPropagation();
});
row.append(cell)
}
$('#board').append(row);
}
setInterval(function () {
for(var x=0; x<size; x++) {
for(var y=0; y<size; y++) {
$('#C' + x + '_' + y).text(grid[x][y]);
}
}
$('#info').text('x: ' + active.x + ' y: ' + active.y);
}, 100);
};
init();
#board {
padding: 20px;
z-index: -1;
}
.row {
height: 25px;
}
.cell {
position: relative;
display: inline-block;
width: 25px;
height: 25px;
border: 1px solid black;
text-align: center;
line-height: 25px;
cursor: default;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="board"></div>
<div id="info"></div>
<p>
Click on the board once to set focus. This lets the keyboard work. Press <strong>S</strong> to make a tile go down, press <strong>W</strong> to make a tile go up.
</p>
<button id="reset">Reset</button>

Uncaught RangeError: Maximum call stack size exceeded This error occurs when there is no breakpoint for recursion function. When you call any function from that function or such like that. Then the execution goes then caller function goes into stack and callee function gets into memory for execution. If there is no return statement or condition before recursion, then processor stack gets full and throws this error message.
In your case, you are calling moveDown from moveDown but there one condition which is always true and which is responsible for calling moveDown again, or same with moveUp.
Just debug with breakpoints, you will get where it is wrong.

Not sure what is wrong with the function [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am completely new to this and am trying to write a program which will take inputs on a webpage and score the results in an output box. I am not sure what the problem is with this set of javascript, though I am sure that I am missing an integral piece! Any help is much appreciated!
function laten() {
var Q2 = document.getElementById('twoScore').value;
if (Q2 == "") {
Q2 = 0;}
var Q2new = 0;
if (parseInt(Q2) >= 0) && (parseInt(Q2) <= 15) {
Q2new = 0;
} else if (parseInt(Q2) > 15) && (parseInt(Q2) <=30) {
Q2new = 1;
} else if (parseInt(Q2) > 30) && (parseInt(Q2) <=60) {
Q2new = 2;
} else if (parseInt(Q2) > 60) {
Q2new = 3;
}
document.getElementById('latency').value = Q2new;
var Q5a = document.getElementById('fiveaScore').value;
if (Q5a == "") {
Q5a = 0;}
var latenAdd = parseInt(Q5a) + parseInt(Q2new);
if (latenAdd == "") {
latenAdd = 0;}
var latenScore = 0;
if (latenScore == "") {
latenScore = 0;}
if (latenAdd == 0) {
latenScore = 0;
} else if ((latenAdd >= 1) && (latenAdd <= 2)) {
latenScore = 1;
} else if ((latenAdd >= 3) && (latenAdd <= 4)) {
latenScore = 2;
} else if ((latenAdd >= 1) && (latenAdd <= 2)) {
latenScore = 3;
}
if (!isNaN(latenScore)) {
document.getElementById('latency').value = latenScore;
}

You have several syntax errors:
You are missing global parens in some if statements with multiple conditions, it should be like this:
if ( (condition 1) && (condition2))
You are also missing a final }:
Here is the final fixed code:
function laten() {
var Q2 = document.getElementById('twoScore').value;
if (Q2 == "") {
Q2 = 0;
}
var Q2new = 0;
if ((parseInt(Q2) >= 0) && (parseInt(Q2) <= 15)) {
Q2new = 0;
} else if ((parseInt(Q2) > 15) && (parseInt(Q2) <=30)) {
Q2new = 1;
} else if ((parseInt(Q2) > 30) && (parseInt(Q2) <=60)) {
Q2new = 2;
} else if (parseInt(Q2) > 60) {
Q2new = 3;
}
document.getElementById('latency').value = Q2new;
var Q5a = document.getElementById('fiveaScore').value;
if (Q5a == "") {
Q5a = 0;
}
var latenAdd = parseInt(Q5a) + parseInt(Q2new);
if (latenAdd == "") {
latenAdd = 0;
}
var latenScore = 0;
if (latenScore == "") {
latenScore = 0;
}
if (latenAdd == 0) {
latenScore = 0;
}
else if ((latenAdd >= 1) && (latenAdd <= 2)) {
latenScore = 1;
}
else if ((latenAdd >= 3) && (latenAdd <= 4)) {
latenScore = 2;
}
else if ((latenAdd >= 1) && (latenAdd <= 2)) {
latenScore = 3;
}
if (!isNaN(latenScore)) {
document.getElementById('latency').value = latenScore;
}
}

Categories