Uzma Khan Uzma Khan - 4 months ago 7
HTML Question

Why it is not working for class ".1" in array and working fine for other classes?

I have an array named array(commented it TOP array), this array actually contains classes of different div elements. I joined the array to make each element of this form ".1" or ".4" etc, now if any class out of these is clicked, I store its html in variable hello, then I extract classes out of the html of hello and put them in an array. Now I need to know what the user clicked, so I make an array blaharray to compare the array elements of hello with it. By doing so I am trying to match classes like "1" or "6" of hello array withing blaharray. If matched I add "." with the matched element of hello to make it something like ".7" denoting the class which user clicked,and I store it in userclicked. But userclicked is returning nothing if class ".1" is clicked. So I tried to check if there was a problem in hello array for class ".1" and found out that outside the for loop(where crazy code starts) hello returns the proper array for class ".1" i.e ["1", "col-xs-4", "col-md-4"] but inside for loop when I console hello when ".1" is clicked it give no output in console. But if I clicked any other class like 2 to 9 it gives proper hello and userclicked output inside and outside for loop.But why is it not working when hello is ["1", "col-xs-4", "col-md-4"] (I mean when ".1" is clicked)?

array = [".1,.2,.3,.4,.5,.6,.7,.8,.9"]; //TOP array

$(array.join("")).click(function() {
$(this).html(input);
var hello=this; //it will store the html of clicked class
hello=hello.className.split(/\s+/); //it will extract the classes and put them in an array like this---> ["1", "col-xs-4", "col-md-4"]

var blaharray=["1","2","3","4","5","6","7","8","9"];
console.log(hello); //here it works giving ["1", "col-xs-4", "col-md-4"]

for(var i=0;i<hello.length;i++){ //Crazy code starts
if(blaharray.indexOf(hello[i])>0){ //it will check if any class in hello array is found in blah array,we are checking here for class "1" of ["1", "col-xs-4", "col-md-4"]
userclicked="."+hello[i]; //if it is found, it adds a "." to it to make ".1" of TOP array joined by ""(I will use it in some code)
console.log(hello); //here the console produces nothing i.e blank ONLY if ".1" is clicked
}
} //Crazy code ends to tell us what the user clicked
});


Here is the html for reference of classes I have classes like 1,2 etc for divs.

<div class="container-fluid">
<div class=" yo text-center row">
<h1>Tic Tac Toe by Uzma</h1>
<div class="col-xs-12 col-md-12 we">
<div class="row ">
<div class="1 col-xs-4 col-md-4"></div>
<div class="2 col-xs-4 col-md-4"></div>
<div class="3 col-xs-4 col-md-4"></div>
</div>
<div class="row">
<div class="4 col-xs-4 col-md-4"></div>
<div class="5 col-xs-4 col-md-4"></div>
<div class="6 col-xs-4 col-md-4"></div>
</div>
<div class="row">
<div class="7 col-xs-4 col-md-4"></div>
<div class="8 col-xs-4 col-md-4"></div>
<div class="9 col-xs-4 col-md-4"></div>
</div>
</div>
</div>
</div>


Here is Codepen to check for different clicks http://codepen.io/meow414/pen/QExLOG?editors=1001

Answer

That's because the index of '1' in blaharray is 0 and will never pass the if condition:

 var blaharray=["1","2","3","4","5","6","7","8","9"];
 console.log(blaharray.indexOf("1"));

You should do: if(blaharray.indexOf(hello[i])>=0){

IndexOf function returns "The first index of the element in the array; -1 if not found."