Develop Reference

Simple Calculator: Value in Function not defined but is listed in condition

After some extensive reading and help from the community I have started to create formulae in the form of calculators to practice my knowledge using my real world influences. I have created this calculator and added an additional condition to the equation but now the working calculator can't define a function which had worked previously.
The value is defined and given at the beginning of the function so I don't understand why it is not longer defined when adding the condition.
var lsaForm = document.forms["lsacalc"],
days = document.getElementById('days'),
rlsa = document.getElementById("rlsa"),
dayRateLsa = document.getElementById("rlsa"),
rddlsa = document.getElementById("rddlsa"),
tlsa = document.getElementById('tlsa');
function lsaupdateTotals() {
var x = rlsa.value;
var y = dayRateLsa.value;
if (x == 1 || (y > 1 && y < 281)) {
rdlsa = 7.45;
} else if (x == 2 || (y > 280 && y < 461)) {
rdlsa = 11.65;
} else if (x == 3) {
rdlsa = 15.85;
} else if (x == 4) {
rdlsa = 17.40;
} else if (x == 5) {
rdlsa = 18.73;
}
let total = days.value * rdlsa;
rddlsa.innerHTML = `Daily rate of LSA £${rdlsa}`;
tlsa.innerHTML = `Total LSA Enitlement £${total}`;
}

I have resolved this by applying the rest of the conditions throughout the function, the console returned an error but unspecified. Theoretically I think that the value of 'RDLSA' returned different with the additional conditions.
function lsaupdateTotals() {
var x = rlsa.value;
var y = dayRateLsa.value;
if (x = 1 || (y > 1 && y < 281)) {
rdlsa = 7.45;
} else if (x = 2 || (y > 280 && y < 461)) {
rdlsa = 11.65;
} else if (x = 3 || (y > 461 && y < 640)) {
rdlsa = 15.85;
} else if (x = 4 || (y > 641 && y < 821)) {
rdlsa = 17.40;
} else if (x = 5 || (y > 821 && y < 1001)) {
rdlsa = 18.73;
} else if (x = 6 || (y > 1001 && y < 1181)) {
rdlsa = 20.07;
} else if (x = 7 || (y > 1181 && y < 1360)) {
rdlsa = 21.39;
} else if (x = 8 || (y > 1361 && y < 1540)) {
rdlsa = 23.40;
} else if (x = 9 || (y > 1541 && y < 1720)) {
rdlsa = 24.75;
} else if (x = 10 || (y > 1721 && y < 1901)) {
rdlsa = 26.09;
} else if (x = 11 || (y > 1901 && y < 2081)) {
rdlsa = 27.42;
} else if (x = 12 || (y > 2081 && y < 2261)) {
rdlsa = 28.77;
} else if (x = 13 || (y > 2261 && y < 2241)) {
rdlsa = 30.09;
} else if (x = 14 || (y > 2241 && y < 2801)) {
rdlsa = 31.43;
} else if (x = 15 || (y > 2801 && y < 3160)) {
rdlsa = 32.75;
} else if (x = 16 || y < 3161) {
rdlsa = 34.07;
};
let total = days.value * rdlsa;
rddlsa.innerHTML = `Daily rate of LSA £${rdlsa}`;
tlsa.innerHTML = `Total LSA Enitlement £${total}`;
}

Can a Javascript condition be between numbers?

I'm looking to identify a category based on this table:
I have an if statement that seems to work for some conditions, but not others. R, P, and Q are working, but conditions that go between numbers aren't returning the right category.
If statement:
function getCategory(featureFunctionalScore, featureDysfunctionalScore) {
if (featureFunctionalScore == 4 && featureDysfunctionalScore == -2) {
return "Performance";
} else if (featureFunctionalScore == 4 && featureDysfunctionalScore <= -1 && featureDysfunctionalScore > 4) {
return "Attractive"
} else if (featureFunctionalScore <= -1 && featureFunctionalScore > 4 && featureDysfunctionalScore == 4) {
return "Expected"
} else if ((featureFunctionalScore >= -2 && featureFunctionalScore <= 2 && featureDysfunctionalScore == -2) || (featureFunctionalScore == -2 && featureDysfunctionalScore >= -2 && featureDysfunctionalScore <= 2)) {
return "Reverse"
} else if ((featureFunctionalScore == 4 && featureDysfunctionalScore == -2) || (featureFunctionalScore == 2 && featureDysfunctionalScore == -1) || (featureFunctionalScore == -1 && featureDysfunctionalScore == 2) || (featureFunctionalScore == -2 && featureDysfunctionalScore == 4)) {
return "Questionable"
} else {
return "Indifferent"
};
};
Am I missing something important?
Update
This statement works in Excel, but I'm struggling to get it to work in JS:
=IF(OR(AND(C3 <= 2, B3 <= -1), AND(C3 <= -1, B3 <= 2)), "R", IF(AND(C3 <= 2, C3 >= -1, B3 <= 2, B3 >= -1), "I", IF(AND(C3 >= 2,B3 >= -1, B3 <= 2),"A", IF(AND(C3 <= 2, B3 <= 4, B3 >= 2), "M", IF(AND(C3 >= 2, B3 >= 2), "P", "Q")))))

This should be what you're looking for. I'm sure it could be optimized, but it works. JSFiddle: https://jsfiddle.net/yxb7tr9n/
function getCategory(x,y){
var answer = -999;
if (x == 4 && y == 4){
answer = "p";
}else if([-1,0,2].indexOf(x) >= 0 && y == 4){
answer = "A";
}else if((x == -2 && y == 4) || (x == -1 && y == 2) || (x == 4, y == -2)){
answer = "Q";
}else if(x == 4 && [-1,0,2].indexOf(y) >= 0) {
answer = "M";
}else if((x == -1 && [-1,0].indexOf(y) >= 0) || (x == 0 && [-1,0,2].indexOf(y) >= 0) || (x == 2 && [0,2].indexOf(y) >= 0)){
answer = "I";
}else if ((x == -2 && [-2,-1,0,2].indexOf(y) >= 0) || (y == -2 && [-2,-1,0,2].indexOf(x) >= 0)) {
answer = "R";
}else{
answer = "??";
}
return answer;
}
UPDATE: Alternate version using a coordinate mapping system. JSFiddle: https://jsfiddle.net/g2d6p4rL/4/
function indexOfCustom (parentArray, searchElement) {
for ( var i = 0; i < parentArray.length; i++ ) {
if ( parentArray[i][0] == searchElement[0] && parentArray[i][1] == searchElement[1] ) {
return i;
}
}
return -1;
}
function getCategory2(x,y){
var p = [[4,4]];
var q = [[-2,4],[-1,2],[2,-1],[4,-2]];
var a = [[-1,4],[0,4],[2,4]];
var m = [[4,2],[4,0],[4,-1]];
var i = [[0,2],[2,2],[-1,0],[0,0],[2,0],[-1,-1],[0,-1]];
var r = [[-2,2],[-2,0],[-2,-1],[-2,-2],[-1,-2],[0,-2],[2,-2]];
coord = [x,y];
if (indexOfCustom(p,coord) >= 0){
return "p";
} else if (indexOfCustom(q,coord) >= 0){
return "Q";
} else if (indexOfCustom(a,coord) >= 0){
return "A";
} else if (indexOfCustom(m,coord) >= 0){
return "M";
} else if (indexOfCustom(i,coord) >= 0){
return "I";
} else if (indexOfCustom(r,coord) >= 0){
return "R";
}else{
return "??";
}
}
Output of all answers:
[-2,-2] = R
[-2,-1] = R
[-2,0] = R
[-2,2] = R
[-2,4] = Q
[-1,-2] = R
[-1,-1] = I
[-1,0] = I
[-1,2] = Q
[-1,4] = A
[0,-2] = R
[0,-1] = I
[0,0] = I
[0,2] = I
[0,4] = A
[2,-2] = R
[2,-1] = Q
[2,0] = I
[2,2] = I
[2,4] = A
[4,-2] = Q
[4,-1] = M
[4,0] = M
[4,2] = M
[4,4] = p

Simplified javascript some function with almost the same code

Hei, I'm working an app to simulate prices. I have a code like this.
function max110(x) {
if (x >= '1' && x <= '50') {
var sum = 120 * x;
hasil.value = 'Rp.' + parseFloat(sum * 1000);
} else if (x >= '51' && x <= '100') {
var sum = 115 * x;
hasil.value = 'Rp.' + parseFloat(sum * 1000);
} else if (x >= '101' && x <= '200') {
var sum = 110 * x;
hasil.value = 'Rp.' + parseFloat(sum * 1000);
} else {
hasil.value = 'error!';
}
}
function max115(x) {
if (x >= '1' && x <= '50') {
var sum = 125 * x;
hasil.value = 'Rp.' + parseFloat(sum * 1000);
} else if (x >= '51' && x <= '100') {
var sum = 120 * x;
hasil.value = 'Rp.' + parseFloat(sum * 1000);
} else if (x >= '101' && x <= '200') {
var sum = 115 * x;
hasil.value = 'Rp.' + parseFloat(sum * 1000);
} else {
hasil.value = 'error!';
}
}
And I still have some functions similar to that, it almost the same code I'm trying to make it simple, is it possible to make it in 1 function only?

Try:
function maxval(x,maxval) {
if(x >= '1' && x <= '50'){
var sum = (maxval+10)* x;
hasil.value = 'Rp.'+parseFloat(sum*1000);
}
else if (x >= '51' && x <= '100'){
var sum = (maxval+5)* x;
hasil.value = 'Rp.'+parseFloat(sum*1000);
}
else if(x >= '101' && x <= '200'){
var sum = (maxval)* x;
hasil.value = 'Rp.'+parseFloat(sum*1000);
}
else{
hasil.value = 'error!';
}
}
By the way i assumed that maxval increments by 5, Cant get you a better solution without getting more details about functionality.

This would be my implementation. I don't agree with how you're handling your integers, but it's your coding style. I pass in an object of choice that has all of the values that I want. You don't need the logic, just the values. I hope nobody gets mad that I monkeypatch String. I'm assuming that your variable x is a string.
String.prototype.isBetween = function(lower, upper){
int = parseInt(this)
return int >= parseInt(lower) && int <= parseInt(upper)
}
max110 = {0: 120, 1: 115, 2: 110}
max115 = {0: 125, 1: 120, 2: 115}
function max(x, values) {
let sum
hasil.value = ''
if (x.isBetween('1', '50')) {
sum = values['0'] * x
} else if (x.isBetween('51', '100')) {
sum = values['1'] * x
} else if (x.isBetween('101', '200')) {
sum = values['2'] * x
} else {
hasil.value = 'error'
}
hasil.value = hasil.value ? 'error' : 'Rp.'+parseFloat(sum*1000);
}

function max(x, extra) {
var sum_number = extra;
if(x >= '1' && x <= '50'){
sum_number += 120;
}
else if (x >= '51' && x <= '100'){
sum_number += 115;
}
else if(x >= '101' && x <= '200'){
sum_number += 110;
}
if(x < 1 && x > 200){
hasil.value = 'error!';
} else {
hasil.value = 'Rp.'+parseFloat((sum_number) * x *1000);
}
}
parameter extra can be 0 or 5 for function max110 or max115

Basically, you have two function which works the same way and returns the same with different values.
The different values yould be stored in an array and you could use a single function for getting the index and then take the needed value out of the array with that index.
So you need a better organisation of types of the variables, which if uses as number, it should be number and also for comparison, then it should be a number on both sides of the condition.
Use a pure function, which does not alter a state of something, which is not given into the function.
Use a check in the function for unwanted values and exit early with a first check at the lower border, in your case, it is zero and below, return -1, because that is not an index of an array (and it is usually used to denote, that no index is found, like with Array#indexOf).
Then take the upper border for a check end exit early with a index value, no need for continuing else if structures.
At the end return as well -1 for not found index.
Together:
function getValue(x, maxArray) {
var index = getIndex(x);
if (index in maxArray) {
return 'Rp.' + maxArray[index] * x * 1000;
}
return 'error!';
}
function getIndex(x) {
if (!x || x < 0) {
return -1;
}
if (x <= 50) {
return 0;
}
if (x <= 100) {
return 1;
}
if (x <= 200) {
return 2;
}
return -1;
}
var max110 = [120, 115, 110],
max115 = [125, 120, 115];
console.log(getValue(-1, max110));
console.log(getValue(10, max110));
console.log(getValue(10, max115));

Codepen : " Uncaught SyntaxError: Unexpected token ( " in browser console when other environments don't throw errors

I keep having
Uncaught SyntaxError: Unexpected token ( at pen.js:121
on my code on codepen, which causes it to abort execution, although it is working in Brackets & other editors and other people browsers.
Here is the link : http://codepen.io/N0bl3/full/EKPYZB/
/*jshint esnext:true, browser:true*/
var TICTACTOE = {
grid: {
size: 3,
color: "#000000",
plays: []
},
players: [{
name: "Cross",
symbol: "X"
}, {
name: "Circle",
symbol: "O"
}],
currentPlayer: 1,
played: 0,
drawGrid(ctx) {
for (var i = 0; i <= this.grid.size; i++) {
ctx.beginPath();
ctx.strokeStyle = "red";
ctx.lineWidth = "1";
ctx.moveTo(0, 200 / 3 * i);
ctx.lineTo(200, 200 / 3 * i);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200 / 3 * i, 0);
ctx.lineTo(200 / 3 * i, 200);
ctx.stroke();
}
},
drawSign(ctx, symbol, x, y) {
//Canvas draw
if (symbol === "X") {
ctx.strokeStyle = "red";
ctx.lineWidth = "1";
ctx.beginPath();
ctx.moveTo(200 / 3 * x, 200 / 3 * y);
ctx.lineTo(200 / 3 * (x + 1), 200 / 3 * (y + 1));
ctx.stroke();
ctx.beginPath();
ctx.moveTo(200 / 3 * (x + 1), 200 / 3 * y);
ctx.lineTo(200 / 3 * x, 200 / 3 * (y + 1));
ctx.stroke();
} else {
ctx.strokeStyle = "green";
ctx.lineWidth = "1";
ctx.beginPath();
ctx.arc(200 / 3 * x + 200 / 3 / 2, 200 / 3 * y + 200 / 3 / 2, 200 / 3 / 2, 0, 2 * Math.PI);
ctx.stroke();
}
alert("Drawing: " + x + " " + y);
},
init() {
var c = document.getElementById("TICTACTOE");
var ctx = c.getContext("2d");
this.drawGrid(ctx);
c.addEventListener("click", function(event) {
var x = event.clientX;
var y = event.clientY;
var sizeSquare = 200 / 3;
var legal = false;
if (x < sizeSquare && y < sizeSquare && typeof TICTACTOE.grid.plays[0] !== "number") {
TICTACTOE.grid.plays[0] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[0]].symbol, 0, 0);
legal = true;
} else if (x >= sizeSquare && x < sizeSquare * 2 && y < sizeSquare && typeof TICTACTOE.grid.plays[1] !== "number") {
TICTACTOE.grid.plays[1] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[1]].symbol, 1, 0);
legal = true;
} else if (x >= sizeSquare * 2 && y < sizeSquare && typeof TICTACTOE.grid.plays[2] !== "number") {
TICTACTOE.grid.plays[2] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[2]].symbol, 2, 0);
legal = true;
} else if (x < sizeSquare && y >= sizeSquare && y < sizeSquare * 2 && typeof TICTACTOE.grid.plays[3] !== "number") {
TICTACTOE.grid.plays[3] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[3]].symbol, 0, 1);
legal = true;
} else if (x >= sizeSquare && x < sizeSquare * 2 && y >= sizeSquare && y < sizeSquare * 2 && typeof TICTACTOE.grid.plays[4] !== "number") {
TICTACTOE.grid.plays[4] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[4]].symbol, 1, 1);
legal = true;
} else if (x >= sizeSquare * 2 && y >= sizeSquare && y < sizeSquare * 2 && typeof TICTACTOE.grid.plays[5] !== "number") {
TICTACTOE.grid.plays[5] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[5]].symbol, 2, 1);
legal = true;
} else if (x < sizeSquare && y >= sizeSquare * 2 && typeof TICTACTOE.grid.plays[6] !== "number") {
TICTACTOE.grid.plays[6] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[6]].symbol, 0, 2);
legal = true;
} else if (x >= sizeSquare && y >= sizeSquare * 2 && x < sizeSquare * 2 && typeof TICTACTOE.grid.plays[7] !== "number") {
TICTACTOE.grid.plays[7] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[7]].symbol, 1, 2);
legal = true;
} else if (x >= sizeSquare * 2 && y >= sizeSquare * 2 && typeof TICTACTOE.grid.plays[8] !== "number") {
TICTACTOE.grid.plays[8] = TICTACTOE.currentPlayer;
TICTACTOE.drawSign(ctx, TICTACTOE.players[TICTACTOE.grid.plays[8]].symbol, 2, 2);
legal = true;
} else {
legal = false;
}
if (legal) {
TICTACTOE.played++;
TICTACTOE.checkEnd();
} else {
alert("This move is not allowed");
}
TICTACTOE.currentPlayer = TICTACTOE.currentPlayer === 1 ? 0 : 1;
document.getElementById("player").textContent = TICTACTOE.currentPlayer;
});
},
checkEnd() {
if (this.played >= 5) {
//Verifier les possibilités gagnantes 0 2 4 fonctionne pourquoi? et 023
var plays = this.grid.plays;
if (
(plays[0] === plays[1] && plays[1] === plays[2] && typeof plays[0] === "number") ||
(plays[0] === plays[4] && plays[4] === plays[8] && typeof plays[0] === "number") ||
(plays[0] === plays[3] && plays[3] === plays[6] && typeof plays[0] === "number") ||
(plays[1] === plays[4] && plays[4] === plays[7] && typeof plays[1] === "number") ||
(plays[2] === plays[4] && plays[4] === plays[6] && typeof plays[2] === "number") ||
(plays[2] === plays[5] && plays[5] === plays[8] && typeof plays[2] === "number") ||
(plays[3] === plays[4] && plays[4] === plays[5] && typeof plays[3] === "number") ||
(plays[6] === plays[7] && plays[7] === plays[8] && typeof plays[6] === "number")
) {
alert("The winner is: " + this.players[this.currentPlayer].name);
window.location.reload();
} else if (this.played >= 9) {
alert("Match end! No one wins this time!");
window.location.reload();
}
}
}
};
document.getElementById("player").textContent = TICTACTOE.currentPlayer;
TICTACTOE.init();
& the HTML :
<canvas id="TICTACTOE" width="200" height="200">Your browser doesn't support HTML 5 canvas. Consider upgrading or changing your browser</canvas>
<p>Hello!</p>
<p id="player"></p>
What is wrong?
Thanks.

Just formalizing my comment with an "official" answer. The error was being thrown on the following line:
// ...
alert("The winner is: " + this.players[this.currentPlayer].name);
window.(); // Uncaught SyntaxError: Unexpected token (
// ...
Whereas, the source code contains the following:
// ...
alert("The winner is: " + this.players[this.currentPlayer].name);
window.location.reload();
// ...
Clearly, codepen does not like the window.location.reload() calls (?) and is stripping that code out.
Note that any errors/exceptions that appear in your browser's dev tools usually include a link you can click to be taken to the offending line of source code.

A for loop that does the same as if else statement?

I have an if else statement, I was wondering if I could change it into a for loop or something similar.
if (lastScroll >= 0 && lastScroll < 40) {
pos = 0;
} else if (lastScroll >= 40 && lastScroll < 80) {
pos = 1;
} else if (lastScroll >= 80 && lastScroll < 120) {
pos = 2;
} else if (lastScroll >= 120 && lastScroll < 160) {
pos = 3;
} else if (lastScroll >= 160 && lastScroll < 200) {
pos = 4;
} else if (lastScroll > 200) {
pos = 5;
}
I want to change this because there could be over 100 positions. I was thinking about creating a for loop like this:
var i = 0;
greater = 0;
less = 40;
for (i = 0; i < 100; i++) {
if (lastScroll >= greater && lastScroll < less) {
pos = i;
greater += 40;
less += 40;
}
}
The if else statement works perfectly but I don't want to create 100 if else statements. This is wrapped in a scroll function.

Because it's linear you can use division and rounding
pos = Math.floor(lastScroll / 40);
if (pos > 5) pos = 5;

You don't need a loop. You can do the following:
if( lastScroll > 200 ) {
pos = 5;
} else if ( lastScroll >= 0 ) {
pos = Math.floor( lastScroll / 40 );
}

If you want, you could potentially scrap everything and use
pos = int(lastscroll / 40);