In loose mode, this is always an object type, not a primitive type. So the this in your callback is a String, not a primitive string. inArray uses === (strict equality) for the check, and a primitive string is not strictly equal to a String object.
Several options for you:
Use strict mode
In strict mode, this can be a primitive, and so your code works (if I add variable declarations; see the "side note" at the end of the answer):
"use strict"; var consoleLine = "<p class=\"console-line\"></p>"; console = { log: function (text) { $("#console-log").append($(consoleLine).html(text)); } }; finalClick(); function finalClick(){ var roles=["President", "Dog", "Treasurer"] var neededRoles=["President", "Secretary", "Treasurer"]; // console.log("test: "+roles[0]); var rolecount=0; console.log("value changed"); $(neededRoles).each(function(){ //console.log("this is this "+this+" "+rolecount+" "+roles[rolecount]); if(jQuery.inArray(this, roles)=='-1'){ console.log("Not in array "+this); } else { console.log("Found in array "+this); } //rolecount++; }); }
<div id="console-log"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use $.each instead of $().each
Instead of $(neededRoles).each(...), use $.each(neededRoles, function(index, role) and use role, which will be a string primitive:
var consoleLine = "<p class=\"console-line\"></p>"; var console = { log: function (text) { $("#console-log").append($(consoleLine).html(text)); } }; finalClick(); function finalClick(){ var roles=["President", "Dog", "Treasurer"] var neededRoles=["President", "Secretary", "Treasurer"]; // console.log("test: "+roles[0]); var rolecount=0; console.log("value changed"); $.each(neededRoles, function(index, role){ //console.log("this is this "+this+" "+rolecount+" "+roles[rolecount]); if(jQuery.inArray(role, roles) == -1){ console.log("Not in array " + role); } else { console.log("Found in array " + role); } //rolecount++; }); }
<div id="console-log"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use Array#forEach and Array#indexOf
Or better yet, use Array#forEach and Array#indexOf, shimming them on really old browsers that don't have them:
var consoleLine = "<p class=\"console-line\"></p>"; var console = { log: function (text) { $("#console-log").append($(consoleLine).html(text)); } }; finalClick(); function finalClick(){ var roles=["President", "Dog", "Treasurer"] var neededRoles=["President", "Secretary", "Treasurer"]; // console.log("test: "+roles[0]); var rolecount=0; console.log("value changed"); neededRoles.forEach(function(role) { if (roles.indexOf(role) == -1) { console.log("Not in array " + role); } else { console.log("Found in array " + role); } //rolecount++; }); }
<div id="console-log"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Use Array#filter
If your goal is to find missing roles that are required, you can use Array#filter:
var consoleLine = "<p class=\"console-line\"></p>"; var console = { log: function(text) { $("#console-log").append($(consoleLine).html(text)); } }; finalClick(); function finalClick() { var roles = ["President", "Dog", "Treasurer"] var neededRoles = ["President", "Secretary", "Treasurer"]; var missingRoles = neededRoles.filter(function(role) { return roles.indexOf(role) == -1; }); console.log("Missing roles: " + missingRoles.join(", ")); }
<div id="console-log"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Side note: Your original code was falling prey to The Horror of Implicit Globals because you weren't declaring a lot of your variables. I've fixed that in all of the above examples.
neededRoles.forEach(role) { if( roles.indexOf(role) < 0) console.log("Not in array: "+role); };)