How to set custom step input value? - javascript

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);
});
});

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;
});

Javascript setInterval flickering

I'm trying to create a chess clock using JavaScript. I've settle almost all of the issues with the clock's functionality except for this one. I'm using setInterval to essentially create the "countdown" effect on each player's clock. However, when it is triggered with the method I'm currently using the clock flickers. From my understanding/research, this is likely because there are overlapping 'intervals' that cause the code to try to display multiple intervals at the same time. Essentially the clock buttons (stopclock and stopclock2) when clicked call the functions on the bottom of my code. Could anyone provide some input on my code (below) and why this might be occurring?
clear1mils = "";
clear2mils = "";
//Clock Functions
function countdownmils2() {
document.getElementById("milsvalue2").innerHTML = --mil2;
if (mil2 == 0) {
mil2 = mil2 + 59;
if (sec2 == 0) {
if (min2 == 0) {
clearInterval(clear2mils);
document.getElementById("milsvalue2").innerHTML = "00";
}else if (min2 !== 0) {
sec2 = 60;
document.getElementById("minutesvalue2").innerHTML = --min2;
document.getElementById("secondsvalue2").innerHTML = --sec2;
}
}else if (sec2 !== 0) {
document.getElementById("secondsvalue2").innerHTML = --sec2;
if (sec2 <= 10) {
document.getElementById("secondsvalue2").innerHTML = "0" + sec2;
}
}
}else if (mil2 <= 10) {
document.getElementById("milsvalue2").innerHTML = "0" + mil2;
}
}
function countdownmils() {
document.getElementById("milsvalue").innerHTML = --mil;
if (mil == 0) {
mil = mil + 59;
if (sec == 0) {
if (min == 0) {
clearInterval(clear1mils);
document.getElementById("milsvalue").innerHTML = "00";
}else if (min !== 0) {
sec = 60;
document.getElementById("minutesvalue").innerHTML = --min;
document.getElementById("secondsvalue").innerHTML = --sec;
}
}else if (sec !== 0) {
document.getElementById("secondsvalue").innerHTML = --sec;
if (sec <= 10) {
document.getElementById("secondsvalue").innerHTML = "0" + sec;
}
}
}else if (mil <= 10) {
document.getElementById("milsvalue").innerHTML = "0" + mil;
}
}
//Clock 1
document.querySelector("#stopclock").addEventListener("click", () => {
clear2mils = setInterval(countdownmils2, 10);
clearInterval(clear1mils);
document.getElementById("stopclock").innerHTML = "DOWN";
document.getElementById("stopclock2").innerHTML = "UP";
document.getElementById("stopclock").setAttribute("disabled", "true");
document.getElementById("stopclock2").removeAttribute("disabled", "true");
});
//Clock 2
document.querySelector("#stopclock2").addEventListener("click", () => {
clear1mils = setInterval(countdownmils, 10);
clearInterval(clear2mils);
document.getElementById("stopclock2").innerHTML = "DOWN";
document.getElementById("stopclock").innerHTML = "UP";
document.getElementById("stopclock2").setAttribute("disabled", "true");
document.getElementById("stopclock").removeAttribute("disabled", "true");
});

Matching variables not updating

The concept is simliar to a slider. Here is the JsFiddle
Each section is set to:
visibility: hidden;
until assigned the "anim-in" class. The issue is with var $currSection and $nextSection that need the var $rightCounter to correctly evaluate.
var $currSection = $rightCounter;
var $nextSection = $rightCounter + 1;
$rightCounter is updated in the counter function:
function counter (event){
var $counterSelect = $(this).attr('id');
if ( $counterSelect == "right") {
if ( $rightCounter >= 0 && $rightCounter <= 4){
$rightCounter += 1;
console.log($rightCounter);
if ($leftCounter <= 0) {
$leftCounter = 0;
console.log($leftCounter);
}
else {
$leftCounter -= 1;
console.log($leftCounter);
}
}
}
else {
if ($leftCounter >= 0 && $leftCounter <= 4){
$leftCounter += 1;
console.log($leftCounter);
if ($rightCounter <= 0) {
$rightCounter = 0;
console.log($rightCounter);
}
else {
$rightCounter -= 1;
console.log($rightCounter);
}
}
}
animOut();
return $rightCounter;
};
The animOut function uses $currSection and $nextSection to redistribute classes, but they are not updating with the $rightCounter?
Note: the console logs are there to show what the vars are evaluating to

Betfair like Odds increment and decrement

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;
}

HTML file won't show my javascript variable

I've written a javascript function with some variables, i've tried to test it to see if variables would show in my HTML document but they wont and i have no idea why. Specifically, i'm trying to insert variable currentScore which is set to 0 at the beginning, so it should show 0 in a textbox, but it doesnt appear there.
Here is my javascript :
var who = 0;
var decision = 0;
var diceOne = 0;
var diceTwo = 0;
var currentScore = 0;
player playerAI = new player;
player playerOne = new player;
document.getElementById('currentScore').value = currentScore;
function rollDice() {
diceOne = Math.round(6 * Math.Random() + 1);
diceTwo = Math.round(6 * Math.Random() + 1);
}
function mainFunction() {
playerAI.playing = true;
playerOne.playing = true;
while (playerAI.playing == true && playerOne.playing == true) {
makeMove();
}
}
function makeMove() {
if (who == 0) {
aiStrat();
game();
}
else {
game();
}
}
function game() {
if (decision == 1) {
rollDice();
if (diceOne != 1 && diceTwo != 1){
currentScore += diceOne + diceTwo;
decision = 0;
makeMove();
}
if (diceOne == 1 || diceTwo == 1){
currentScore = 0;
decision = 0;
who = 1 - who;
makeMove();
}
if (diceOne == 1 && diceTwo == 1) {
currentScore = 0;
if (who == 0) {
playerAI.totalScore = 0;
}
else {
playerOne.totalScore = 0;
}
decision = 0;
who = 1 - who;
makeMove();
}
}
if(decision == -1) {
if (who == 0){
playerAI.totalScore += currentScore;
playerAI.checkScore();
}
else {
playerOne.totalScore += currentScore;
playerOne.checkScore();
}
currentScore = 0;
decision = 0;
who = 1 - who;
}
}
function aiStrat() {
if (playerAI.totalScore < 60) {
if (currentScore < 30) {
decision = 1;
}
else {
decision = -1;
}
}
if (playerAI.totalScore >= 60 && playerAI.totalScore < 80) {
if (currentScore < 20){
decision = 1;
}
else {
decision = -1;
}
}
if (playerAI.totalScore >= 80){
if (currentScore < 10) {
decision = 1;
}
else {
decision = -1;
}
}
}
var player {
var totalScore = 0;
var playing = true;
function checkScore() {
if (totalScore >= 100) {
playing = false;
}
};
};
And my HTML document is this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="BigPig.css">
<script type="text/javascript" src="VorgurakendusedKD1\Vorgurakendused.js" ></script>
</head>
<body onload="javascript:mainFunction()">
<div class="centered" type="text/javascript">
<h1>BIG PIG</h1>
<button><input type="button" value="START FROM BEGINNING" onclick="mainFunction();">
<span></span></button>
<br>
<button><span>GREEN BUTTON</span></button>
<br>
<button><span>RED BUTTON</span></button>
<br>
<output class="textbox" type="text/javascript" id="currentScore">CURRENTSCORE:
</output>
<br>
<output class="textbox" type="text">CPU SCORE: </output>
<br>
<output class="textbox" type="text">PLAYER SCORE: </output>
<br>
<p>Player versus computer</p>
<br>
<p id="currentScore"></p>
</div>
</body>
</html>

Here: document.getElementById('currentScore').value = currentScore;you try to find an element before it has loaded, and that's why you can't assign a value to it.
Try putting document.getElementById('currentScore').value = currentScore; inside your onload-function, mainFunction()

Categories