user1854438 user1854438 - 3 months ago 7
jQuery Question

Jquery inArray always returns true

The

$.inArray
is always returning true for my user groups check

The specific code is in the
run
function and
checkUserCondition
function.

If you run the program it will display a message with the counts.

Click 'Enter Spins' then click 'Toggle Numberpad' then add the number 8

The user groups register as 8 in group 1,2,3,4,5 and in group 5,6,7,8

Why does
$.inArray()
behave that way?



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<style>
.bntcal {
padding: 10px 10px 10px 10px;
margin: 10px;
}
.bntcaladd {
padding: 10px 10px 10px 10px;
margin: 10px;
}

.bntshow{
padding: 5px 5px 5px 5px;
margin: 5px;
width: 10%;
}
.spanhide {
display: none;
}
.bell {
float:left;
display: none;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var wheel0 = [37,32,15,19,4,21,2,25,17,34,6,27,13,36,11,30,8,23,10,5,24,16,33,1,20,14,31,9,22,18,29,7,28,12,35,3,26];
var wheel00 = [37,28,9,26,30,11,7,20,32,17,5,22,34,15,3,24,36,13,1,38,27,10,25,29,12,8,19,31,18,6,21,33,16,4,23,35,14,2];
var wheel = wheel00;
var wColor = "";
var numbers = [];
var color = [];



$(document).ready(function(){

// --- Menu Buttons
$("#enterSpins").click(function(){
$("#divSpins").show();
$("#divAlerts").hide();
$("#divHowTo").hide();
});

$("#setAlert").click(function(){
$("#divAlerts").show();
$("#divSpins").hide();
$("#divHowTo").hide();
});

$("#howTo").click(function(){
$("#divHowTo").show();
$("#divSpins").hide();
$("#divAlerts").hide();

});

// ---- Sub Buttons
$("#enterPad").click(function(){
$("#showSpinsPad").toggle();
$("#clearBox").toggle();
$("#clearBox1").toggle();
if(!$("#showSpinsPad").is(":hidden"))
{
$("#spins").prop("disabled", true)
}
else
{
$("#spins").prop("disabled", false)
}

});

$(".bntcal").click(function(){
$("#currentSpin").text($("#currentSpin").text()+$(this).val())
if ($("#currentSpin").text().length > 2)
{
$("#currentSpin").text($(this).val())
}
});


$("#clear").click(function(){
$("#currentSpin").text("")
});

$("#add").click(function(){

getWheel()
currentSpin = $("#currentSpin").text()
if(currentSpin.length > 0)
{
if ($("#spins").val().length > 0)
{
$("#spins").val($("#spins").val() + ", ");
}
if(parseInt(currentSpin)<37)
{
$("#spins").val($("#spins").val() + currentSpin);
}
if(parseInt(currentSpin) == 37)
{
$("#spins").val($("#spins").val() + "0");
}
if(parseInt(currentSpin) == 38)
{
$("#spins").val($("#spins").val() + "00");
}
if(parseInt(currentSpin)>38)
{
$("#spins").val($("#spins").val() + "0");
}

$("#currentSpin").text("")
}

var n = GetUserNumbers();
run(n)
});

$("#undo").click(function(){
var n = GetUserNumbers();

if (n.length>0)
{
n.pop();
}
$("#spins").val(n)
run(n)
});

$("#clean").click(function(){
$("#spins").val("")
});

$("#run").click(function(){
var n = GetUserNumbers();
run(n)
});

});
// ---------------------------------------------------------------
// --------------------- FUNCTIONS -------------------------------
// ---------------------------------------------------------------

function run(n)
{

$("#alert").text("")

// Evens
var conditions = ['color[n] == "red"','color[n] == "black"','n%2 == 0 && n<37','n%2 == 1 && n<37','n > 18 && n<37','n < 19 && n>0']
var checklocation = ['Red','Black','Even','Odd','High','Low']
var idWins = "#evenwin"
var idLosses = "#evenloss"
checkCondition(n, conditions, checklocation, idWins, idLosses)

// Dozens
var conditions = ['n%3 == 1 && n<37','n%3 == 2 && n<37','n%3 == 0 && n<37','n>=1 && n<=12','n>=13 && n<=24','n>=25 && n<=36']
var checklocation = ['Row 1 [1,2,3..]','Row 2 [2,3,4..]','Row 2 [3,6,9..]','Dozen 1 [1-12]','Dozen 1 [13-24]','Dozen 1 [25-36]']
var idWins = "#dozenwin"
var idLosses = "#dozenloss"
checkCondition(n, conditions, checklocation, idWins, idLosses)

// User Groups
var groups = $("#usergroup1").val().split('-')
var userNumbers = []
for(var i=0; i<groups.length; i++)
{
userNumbers.push(groups[i].split(','))
}
var idWins = "#userwin1"
var idLosses = "#userloss1"
checkUserCondition(n, checklocation, idWins, idLosses, userNumbers)

}

function checkUserCondition(n, checklocation, idWins, idLosses, arr)
{
var check = function(n, a){ if($.inArray(n, a)){ return true; } else { return false; }}

for(var ia=0; ia<arr.length; ia++)
{
var wins = parseInt(0)
var losses = parseInt(0)
wins = checkUserWins(n, check,arr[ia])
losses = checkUserLosses(n, check,arr[ia])
alert(arr[ia])
$("#alert").append("note User Group: "+arr[ia]+" Win count: "+wins+"<br/>")
//if(wins >= $(idWins).val()) { $("#alert").append(checklocation[i]+" loses "+wins+" times in a rows.<br/>")}
//if(losses >= $(idLosses).val()) { $("#alert").append(checklocation[i]+" loses "+losses+" times in a rows.<br/>")}
}

}

function checkCondition(n, conditions, checklocation, idWins, idLosses)
{
for(var i=0; i<conditions.length; i++)
{
var wins = parseInt(0)
var losses = parseInt(0)
var check = function(n){ if(eval(conditions[i])){ return true; } else { return false; }}
wins = checkWins(n, check)

$("#alert").append("note: "+checklocation[i]+" Condition: "+conditions[i]+" Win count: "+wins+"<br/>")

losses = checkLosses(n, check)
//if(wins >= $(idWins).val()) { $("#alert").append(checklocation[i]+" loses "+wins+" times in a rows.<br/>")}
//if(losses >= $(idLosses).val()) { $("#alert").append(checklocation[i]+" loses "+losses+" times in a rows.<br/>")}
}

}

function checkUserWins(n, condition, arr)
{
var wins = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(condition(parseInt(n[i]),arr))
{
wins += 1
}
else
{
wins = 0
}
}

return wins
}

function checkUserLosses(n, condition, arr)
{
var losses = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(condition(n[i],arr))
{
losses = 0
}
else
{
losses += 1
}
}
return losses
}

function checkWins(n, condition)
{
var wins = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(condition(n[i]))
{
wins += 1
}
else
{
wins = 0
}
}

return wins
}

function checkLosses(n, condition)
{
var losses = parseInt(0);
for(var i=0;i<n.length;i++)
{
if(condition(n[i]))
{
losses = 0
}
else
{
losses += 1
}
}
return losses
}

$.fn.multiline = function(text){
this.text(text);
this.html(this.html().replace(/\n/g,'<br/>'));
return this;
}


function getWheel()
{
if($("input[name=wheel]:checked").val()=="0")
{
wheel = wheel0
}
else
{
wheel = wheel00
}
color = GetColor(wheel)
}

function reset()
{
evenwins = parseInt(0);
}
function GetUserNumbers()
{
var n = $("#spins").val().split(",");

for(var x=0; x<n.length; x++)
{
if(n[x].trim() == "0")
{
n[x] = "37";
}
if(n[x].trim() == "00")
{
n[x] = "38";
}
n[x] = parseInt(n[x].trim());
}
return n;
}

function GetColor(wheel)
{
var color = Array();
if(wheel.length==37)
{
color[1] = "red";
color[2] = "black";
color[3] = "red";
color[4] = "black";
color[5] = "red";
color[6] = "black";
color[7] = "red";
color[8] = "black";
color[9] = "red";
color[10] = "black";
color[11] = "black";
color[12] = "red";
color[13] = "black";
color[14] = "red";
color[15] = "black";
color[16] = "red";
color[17] = "black";
color[18] = "red";
color[19] = "red";
color[20] = "black";
color[21] = "red";
color[22] = "black";
color[23] = "red";
color[24] = "black";
color[25] = "red";
color[26] = "black";
color[27] = "red";
color[28] = "black";
color[29] = "black";
color[30] = "red";
color[31] = "black";
color[32] = "red";
color[33] = "black";
color[34] = "red";
color[35] = "black";
color[36] = "red";
color[37] = "green";
}
if(wheel.length==38)
{
color[1] = "red";
color[2] = "black";
color[3] = "red";
color[4] = "black";
color[5] = "red";
color[6] = "black";
color[7] = "red";
color[8] = "black";
color[9] = "red";
color[10] = "black";
color[11] = "black";
color[12] = "red";
color[13] = "black";
color[14] = "red";
color[15] = "black";
color[16] = "red";
color[17] = "black";
color[18] = "red";
color[19] = "red";
color[20] = "black";
color[21] = "red";
color[22] = "black";
color[23] = "red";
color[24] = "black";
color[25] = "red";
color[26] = "black";
color[27] = "red";
color[28] = "black";
color[29] = "black";
color[30] = "red";
color[31] = "black";
color[32] = "red";
color[33] = "black";
color[34] = "red";
color[35] = "black";
color[36] = "red";
color[37] = "green";
color[38] = "green";
}
return color;
}

</script>
</head>
<body>
Toggle Displays</br><br/>
<div >
<button class="bntshow" id="enterSpins">Enter Spins</button><br/>
<button class="bntshow" id="setAlert">Set Alerts</button><br/>
<button class="bntshow" id="howTo">How To</button><br/>
<input type="radio" name="wheel" value="0">0 Wheel<br/>
<input type="radio" name="wheel" value="00" checked>00 Wheel<br/>
</div><br/>
<div id="alert"></div>
<hr>


<!-- Enter Spins -->
<span class="spanhide" id="divSpins">
<button class="bntcaladd" id="enterPad">Toggle Numberpad</button><br/>
<br/>

<span class="spanhide" id='showSpinsPad'>
<br/>
<button class="bntcal" id="calculator" value="0">0</button>
<button class="bntcal" id="calculator" value="00">00</button><br/>
<button class="bntcal" id="calculator" value="1">1</button>
<button class="bntcal" id="calculator" value="2">2</button>
<button class="bntcal" id="calculator" value="3">3</button><br/>
<button class="bntcal" id="calculator" value="4">4</button>
<button class="bntcal" id="calculator" value="5">5</button>
<button class="bntcal" id="calculator" value="6">6</button><br/>
<button class="bntcal" id="calculator" value="7">7</button>
<button class="bntcal" id="calculator" value="8">8</button>
<button class="bntcal" id="calculator" value="9">9</button><br/>
<button class="bntcaladd" id="clear">Clear</button>
<button class="bntcaladd" id="add">ADD</button><span id="currentSpin"></span>
<br/>
<button class="bntcaladd" id="undo">Undo</button><br/>
<span id="currentSpin"></span>
<br/>
</span>
<span id="clearBox">Enter roulette numbers separated by a comma</span><br/>
<textarea rows="10" cols="50" id="spins"></textarea><br/><br/>
<span id="clearBox1">
<button id="clean">Clear Box</button>
<button id="run">Run</button>
</span>

</span>

<!-- Set Alerts -->
<span class="spanhide" id="divAlerts">
<h2>Evens</h2>
<input type="text" id="evenwin" value="2"> Wins in a row<br>
<input type="text" id="evenloss" value="6"> Losses in a row<br>
<br><br>
<h2>Dozens</h2>
<input type="text" id="dozenwin" value="6"> Wins in a row<br>
<input type="text" id="dozenloss" value="6"> Losses in a row<br>
<br><br>
<h2>User Group</h2>
<input type="text" id="usergroup1" value="1,2,3,4,5-5,6,7,8"> Number Group<br>
<input type="text" id="userwin1" value="1"> Wins in a row<br>
<input type="text" id="userloss1" value="6"> Losses in a row<br>
<br><br>

</span>

<!-- How To -->
<span class="spanhide" id="divHowTo">
How To
</span>


</body>
</html>




Answer

Short answer (from jQuery documentation) :

Because JavaScript treats 0 as loosely equal to false (i.e. 0 == false, but 0 !== false), to check for the presence of value within array, you need to check if it's not equal to (or greater than) -1.

JavaScript treats -1 as truthy and 0 as falsy. If the number you are looking for is not in the array it returns -1 treated as true.

For more on boolean in JavaScript refer to those link: w3school and Mozilla

$(document).ready(function(){
  var arr = [1, 2, 3, 4, 5, 6];
  
  var bool = $.inArray(8, arr);
  
  console.log(bool)
  
  if(bool)
    console.log('bool is true')
  else
    console.log('bool is false');
  });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>