Question

I’m having a pretty weird bug occurring in my JS application on a random basis. Basically, the script fails to accurately compare two strings. More specifically, at times does not see two identical strings as identical: ('blah' == 'blah') returns false.

The funny thing is that on another try, the same two strings may be admitted to be identical (statement returns true). I never managed to figure out the pattern. I’ve also tried to use === instead of ==; this didn’t help.

I couldn’t think of a better way to demonstrate and prove this ridiculous bug other than by recording a screencast. So here it is: http://www.screenr.com/klOs. I keep giving correct answers for each quiz in that video, but closer to the end you will how my answers for ‘Japan’ and ‘Taiwan’ will be regarded as ‘wrong’; the console will also show the given answer string, the correct answer string, and the result of their comparison (false ?!!).

So what could possibly be the reason for this odd behaviour and how do I get around fixing it?

You can see the code with the comparison statement in the screencast. The ‘params.givenAnswer’ comes directly from the button text label:

//*** Options for answering the card quiz
quizOptions = new Ext.Panel({
        id: 'quizOptions',
        […………]
        listeners: {
            el: {
                scope: this,
                tap: this.checkAnswer
            }
        }
});


checkAnswer: function(container, element) {

    // Get the text value of the button clicked
    var answer = Ext.fly(element).dom.innerText;

    Ext.dispatch({
        controller: 'Practice',
        action: 'checkAnswer',
        givenAnswer: answer
    }); 
},

UPDATE Thank you @JAAulde and @Mike! I’ve tried to include the quotes and the var type in the logging and I got this result:

Now it’s clear why the string comparison fails: there seem to be an extra line break of sorts in the first string. It’s still very weird, since it didn’t not appear as a blank new line in the previous logging, and most importantly, it appears there randomly (notice how ‘Taiwan’ was accepted this time without any problems).

I’ve included a simple line-break removal rule for the answer strings, and now everything seem to be working fine. Thanks a lot everyone!

Answer 1

Using === is a strict equality comparison. This means that the data type and the contents are being compared. They both (data and type) must be the same to equal and return true.

When you switched your strict comparison to == the test should have worked even though the data types were different. It failed however because of the extra blank spaces.