We Keep Coding

JavaScript studies. How Map() code are being executed?

Good evening.
I'm really struggling to get my head around this and I'm not sure if I'm missing something really stupid, but here is my code and my question.
const question = new Map();
question.set('question', 'What is the official name of the latest major JavaScript version?');
question.set(1, 'ES5');
question.set(2, 'ES6');
question.set(3, 'ES2015');
question.set(4, 'ES7');
question.set('correct', 3);
question.set(true, 'Correct answer :D');
question.set(false, 'Wrong, please try again!');
for (let [key, value] of question.entries()) {
if (typeof(key) === 'number') {
console.log(`Answer ${key}: ${value}`);
}
}
const ans = parseInt(prompt('Write the correct answer'));
console.log(question.get(ans === question.get('correct')));
Can someone please explain to me how, when I insert the right value into the prompt box; the interpreter?... knows to check the next line of code to display "Correct" or "Wrong in the console? depending on my input. I know we have a key of correct and its value is set to 3 but when do we tell it to execute the next lines of code depending on my answer? Does it just parse through the whole code, see a true statement and then executes whatever it is attached too, else execute the false statement? How, why? Apologies if I'm not coming through very clearly.

Your Map has an entry for key true and one for false. One of them is retrieved by using a key that corresponds to this expression:
ans === question.get('correct')
This expression returns true when the given answer is equal to the correct one, and false otherwise. This boolean result is then used as key for the next lookup in your set:
question.get(ans === question.get('correct'))
This effectively retrieves the value for either false or true -- as stored in your Map. And so the correct phrase is retrieved (and displayed).
If you would write that magic line a bit more verbose, it could look like this:
let output;
if (ans === question.get('correct')) { // get() returns 3 here.
output = question.get(true); // This retrieves 'Correct answer :D'
} else {
output = question.get(false); // This retrieves 'Wrong, please try again!'
}
console.log(output);
But realise how ans === question.get('correct') is a boolean expression, meaning it represents false or true, exactly what you want to pass as value to question.get in order to retrieve the phrase to be output.
So, instead of the if construct you can do:
let isCorrect = (ans === question.get('correct')); // false or true
let output = question.get(isCorrect); // This retrieves one of the two phrases
console.log(output);
And what those three lines do can be shortened into just one line:
console.log(question.get(ans === question.get('correct')));
NB: using Maps in this way doesn't look right. You should really use an array for the questions, and plain object(s) for the other stuff.

compare in javascript innerHTML and value

I need to compare the javascript condition below : but I get only false
How can I fix that ?
if(document.getElementById('captchaTypedValue').innerHTML == String(document.getElementById('login:inputCodSeg').value))
returns me false
captchaTypedValue is span element
login:inputCodSeg is input element
javascript chromium console

Here:
if(document.getElementById('captchaTypedValue').innerHTML == String(document.getElementById('inputCodSeg').value)) {
// do stuff
}
basically I think you don't have an ID called login:inputCodSeg. If that doesn't work, it's probably because the condition simply is not true.
ALSO:
if you would like to use jquery:
if ( $('#captchaTypedValue').html() == $('#inputCodSeg').val() ){
// do stuff
}
should work
EDIT: there's also a chance that the condition is just not true

Even if, IF condition is false why statement executes in Javascript?

This is my code,
columnLength = tColumns.length;
if (parseInt(columnLength) ==2) {
tColumns[0].parentNode.insertBefore(tD, tColumns[0].nextSibling);
}
if (parseInt(columnLength) >= 3)
{
tColumns[0].parentNode.insertBefore(tD, tColumns[0].nextSibling);
tColumns[0].parentNode.insertAfter(tD, tColumns[0].nextSibling);
}`
Suppose columnLength is 1.. 1st IF condition is false and its not executing the inside statements.
Even 2nd condition is false since 1 is not greater than equals to 3, but the statements are being executed!
What is wrong with the code?
I'm using Visual Studio IDE to debug, even in immediate window also IF condition returns false as shown below.

ONTOPIC :
I assume your tColumns.length might not have the value you expect it to have. I guess it has the value of undefined which can not be parsed as an integer.
http://jsfiddle.net/FRXkM/1/
OFFTOPIC :
Might not be related to your problem. But parseInt requires a second parameter in conventional ways.
For example:
parseInt("34", 10);
For info on parseInt and its parameters go to http://www.w3schools.com/jsref/jsref_parseint.asp

Strange result while using Javascript not operator

Before anyone jumps in to answer and bash me for asking a silly question; I'm aware of what the not operator does, at least in other languages it should invert a result from true to false and vice versa. The thing I'm stuck on is the strange behavior I get from time to time. I.e. I had this in my code. It's not doing what I expect it to do.
_checkOnOff: function(inst) {
return (!$.suggestBox.onOff || !$.suggestBox._get(inst, 'onOff')) ? false : true;
},
The actual values for the 'onOff' variables that I'm dealing with here are 0 and 1. I'm assuming that the '!' operator will reverse them.
However I couldn't get it to work until I changed the function to explicitly state '== 0' like so...
_checkOnOff: function(inst) {
return ($.suggestBox.onOff == 0 || $.suggestBox._get(inst, 'onOff') == 0) ? false : true;
},
Edit: Added info Both $.suggestBox.onOff and $.suggestBox._get(inst, 'onOff') will be either 0 or 1.
My question is why didn't !$.suggestBox.onOff produce true when $.suggestBox.onOff was equal to 0? Is Javascript ! equivalant to the bitwise operator?
Edit: Second attempt
I tried using '!!' like was suggested (to get a bool) and found nothing changed. Here is the code and outputs:
console.log('val: ' + $.suggestBox.onOff); // outputs: 0
console.log('! : ' + !$.suggestBox.onOff); // outputs: false
console.log('!! : ' + !!$.suggestBox.onOff); //outputs: true
console.log('!!! : ' + !!!$.suggestBox.onOff); //outputs: false
The output doesn't change if $.suggestBox.onOff is 1 or 0!!! it's still false, true, false. What is going on?!
Edit: Third attempt I found out that it has something to do with my variable. I don't know how, but it has to do with the way that it has been set. Ok, prepare yourselves, what I'm about to tell you, may very well blow your mind and change the way you type on the keyboard. It's that incredible:
//this.onOff = 0;
console.log('this.onOff: ' + this.onOff); //output: 0
console.log('! : ' + ! this.onOff); //output: false
console.log('!! : ' + !! this.onOff); //output: true
If I uncomment out the 'this.onOff = 0', thereby explicitly assigning this.onOff to a literal, it changes the output to:
0
true
false
I just found out why. I will write it down in the answer section. Small clue is that it's the way the variable $.suggestBox.onOff was set.

It seems that $.suggestBox.onOff is set with "0" as a string, which in JavaScript is always truthy.
Since "0" is truthy and 0 is falsy, you'd expect 0 == "0" to be false, but it's not.
Try the following in your console:
!! "0"; // true
!! 0; // false
0 == "0"; // true
Weird? Yes. Welcome to the awkward world of JavaScript!
To get around this issue, you should either have $.suggestBox.onOff be an actual number, or convert it on the fly:
_checkOnOff: function(inst) {
return !! ( +$.suggestBox.onOff && +$.suggestBox._get(inst, 'onOff') );
}
Update: Since you pointed out in the comments that you're setting it by a text value, use this when setting it so that it's always set as a number:
$.suggestBox.onOff = +$(this).val();

I think you're confused, because you're negating a string, not a number. Strings are a bit different and handled a bit funny when it comes to their evaluation as a boolean.
!0
is true, as expected.
!"0"
is false... so, the question, is "0" truthy?
I wish I had a better source (sitepoint isn't bad, but it's not as authoritative as a w3 document), but, according to http://www.sitepoint.com/javascript-truthy-falsy/
The following values are always falsy:
false
0 (zero)
"" (empty string)
null
undefined
NaN (a special Number value meaning Not-a-Number!)
All other values are truthy, including
"0" (zero in quotes), "false" (false in quotes), empty functions,
empty arrays, and empty objects.
So, what you are seeing is indeed expected.

If-statement never reaches the else part

I'm trying to change the text of a button with the following code.
// hide unavailable courses
$("#availability_button").click(function () {
$(".availability_red").toggle();
if ($(this).val('Show Unavailable')){
$(this).html('Hide Unavailable');
} else {
$(this).html('Show Unavailable');
}
});
The button text changes the first time I use it, but never again. Not sure why that is and I have pretty much hit the limits of my JS debugging knowledge.
I put an alert into it and proved it never reaches down to the else path.
What am i doing wrong?

It always evaluates to true because .val(val) returns the jQuery object and objects are truthy (ToBoolean gives true) values.
Also, you are using .val() whereas you probably want to check the .html()
Try this:
if ($(this).html() === 'Show Unavailable') {
$(this).html('Hide Unavailable');
} else {
$(this).html('Show Unavailable');
}
Demo http://jsfiddle.net/jfetf/

$(this).val("Show Unavailable") is setting the value and returning an object, it's not checking equality.
Try $(this).val() == "Show Unavailable" instead. It will take the current value and compare it to the string.

$(this).val('Show Unavailable') return jQuery object which is interprete as true.
Also $(this).val('Show Unavailable') set value to element...