trouble with comparing strings in javascript

Question

I'm having a weird issue in JS comparing strings. One string is from a user input.

y = data;
document.getElementById("typeThisWord").innerHTML = y;
x = document.getElementById("inputField");
document.getElementById("youTyped").innerHTML = x.value;
first = document.getElementById("youTyped");
second = document.getElementById("typeThisWord");
if(first==second) correct=true;

When the words are the same, it still comes out false. I added in the 'first' and 'second' variables just to see if it would make a difference. Previously I've tried just comparing 'x' to 'y'. I've also tried x.value==y, x==y.value, and x.value==y.value. THe same with 'first' and 'second.' Surprisingly first.value==second.value came out to be true all the time, even when it shouldn't be.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script>
        var x, y;
        var first, second;
        var availV = window.innerHeight - 100;
        var availH = window.innerWidth - 100;
        var randV, randH;
        var correct = new Boolean(); correct=true;
        var imageX;
        function displayWord() {

            if(correct) {
                correct=false;
                $.ajax({
                    url: "http://localhost:25578/TypeGood/VisitsSession",
                    success: function(data) { y = data; },
                    async: false
                });
                document.getElementById("typeThisWord").innerHTML = y;
                imageX = document.createElement("img");
                imageX.src = "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRPRV4XdE7C9sa0pM-FeXcOSQydg7Sh0INg-ZD6FKZ4wjY8WPHa5Q";
                imageX.height = 100;
                imageX.width = 100;
                imageX.style.position = "absolute";
                randV = Math.round( Math.random() * availV );
                randH = Math.round( Math.random() * availH );
                imageX.style.top = randV + "px";
                imageX.style.left = randH + "px";
                imageX.style.zIndex = "-20";
                document.body.appendChild(imageX);
            }
            x = document.getElementById("inputField");
            document.getElementById("youTyped").innerHTML = x.value;
            first = document.getElementById("youTyped").innerHTML;
            second = document.getElementById("typeThisWord").innerHTML;
            if(first==second) {correct=true;}
            x.value = "";

        }
    </script>

T.J. Crowder · Accepted Answer · 2013-03-11 06:26:46Z

3

getElementById returns a reference to a DOM element, not a string, so you're not comparing strings, you're comparing DOM elements. Since they're different elements, they aren't ==.

At a minimum, your last three lines should be something like:

first = document.getElementById("youTyped").innerHTML;
second = document.getElementById("typeThisWord").innerHTML;
if(first==second) correct=true;

(E.g., using the innerHTML of the elements, which is a string.) Although I think I'd probably keep the values around in variables rather than going back to the DOM for them.

answered Mar 11, 2013 at 6:26

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2155320 Over a year ago

Thank you. It's doing the same thing - it thinks the two elements are not equal when they should be equal. I'm putting in my JS block above.

T.J. Crowder Over a year ago

@user2155320: Two different elements are never equal. That's the point of my answer.

MarmiK · Accepted Answer · 2015-10-15 11:49:11Z

0

For Example:

y = data; //data is string value "First"

Change this value to new string "first" >> here f is small

y2 = "first"

Now, When both are of same type, its case sensitive.

if(y==y2)

so values are..

First == first

that will be false.

So make sure of data you are passing in inner html. and make sure you are not adding some white space to it..

I hope this may solve problem. :)

comment back if not solved after modifying the code :)

edited Oct 15, 2015 at 11:49

answered Mar 11, 2013 at 6:53

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

2 Comments

user2155320 Over a year ago

Also thanks MarmiK but I can't understand what you're saying. What do you mean when you say: First // are you referring to the variable "first"? or is this just the first thing you are saying? y=data; // are you repeating what's in my code? or telling me that it's raw data and not a string? change this to y "first"; // you want me to change the variable to the string "first"? or something else...? i have no idea what you mean. then you may check the second. // how do i check it?

MarmiK Over a year ago

I was telling First mean first step, and second mean second step, and then y=data will have to be changed so make y="first" //the string value. Sorry If you were not able to understand clearly :) I will make it more clear, it was in hurry I guess. Thank you,

Amrendra · Accepted Answer · 2013-03-11 06:34:39Z

-1

use this instead of (first==second):

if(first===second)

and retrieve value from html like this:

 first = document.getElementById("youTyped").innerHTML;

edited Mar 11, 2013 at 6:34

answered Mar 11, 2013 at 6:27

Amrendra

2,0872 gold badges19 silver badges38 bronze badges

1 Comment

T.J. Crowder Over a year ago

If the things you're comparing are actually strings, == vs. === doesn't make the slightest difference. In any case, this has nothing to do with the OP's problem, which is that they're comparing DOM elements.

Collectives™ on Stack Overflow

trouble with comparing strings in javascript

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related