0

Every time I run this code it results to "not a palindrome" even when the input is a palindrome. Why is this happening and how do I get it to show the correct result?

function palindrome(){
var input = document.getElementById("userInput").value;

var letterArray =[];
for(var i=0; i < input.length; i++){

 letterArray.push(input[i]);
}


var backwardsArray =[];

for(var i = input.length-1; i >= 0; i--){
 backwardsArray.push(input[i]);

}
if(letterArray === backwardsArray){
 console.log(input + " is a palidrome");
}else{
 console.log(input + " is not a palidrome");
}


console.log(letterArray);
console.log(backwardsArray);
}
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 
 <input id="userInput"/>
 <button id="submit" onClick="palindrome()">submit</button>
 <div id="input"></div>
 <script src="main.js"></script>
</body>
</html>
xlga
  • 11
  • 1

2 Answers2

1

The strict equality operator (===) will return true only if the two values are actually the same. I would recommend reading this post to better understand how works == and ===. In a nutshell, two different arrays, created separately at different times, will always be two different arrays (even if they contain the same values).

var a = [];
var b = [];
var c = a;
console.log(a === b); // False.
console.log(a === c); // True.

You need to check if every values inside the first array corresponds to the values inside the second array. Here is a way to do it:

function compareArray(array1, array2){
  return (array1.length === array2.length) && array1.every(function(element, index) {
    return element === array2[index]; 
  });
}


function compareArray(array1, array2){
  return (array1.length === array2.length) && array1.every(function(element, index) {
    return element === array2[index]; 
  });
}

console.log(compareArray([1, 2, 3, 4, 5, 6], [1, 2, 3, 4, 5, 6])); // True.
console.log(compareArray([1, 2, 3, 4, 5, 6], [1, 2, 3])); // False.

This being said, there is shorter and more efficient ways to check for a palindrome. You don't need to create a single array:

function isPalindrome(str){
  var n = str.length;
  // You only need to iter on half of the string.
  for(var i = 0; i < n / 2; i++){
    if(str[i] !== str[n - i - 1]){
      return false;
    }
  }
  return true;
}


function isPalindrome(str){
  var n = str.length;
  for(var i = 0; i < n / 2; i++){
    if(str[i] !== str[n - i - 1]){
      return false;
    }
  }
  return true;
}

function palindrome(){
  var input = document.getElementById("userInput").value;
  if(isPalindrome(input)){
    console.log(input + " is a palidrome");
  }else{
    console.log(input + " is not a palidrome");
  }
}
<input id="userInput"/>
<button id="submit" onClick="palindrome()">submit</button>
<div id="input"></div>
Quentin Roy
  • 7,677
  • 2
  • 32
  • 50
-1

Because that's not how you check if arrays are equal. try this condition:

if(letterArray.toString() == backwardsArray.toString()) {
//is palindrome
}
else{
//not palindrome
}

EDIT

As mentioned in comment by @Alexander O'Mara to avoid false-positives you could even do something like:

if(letterArray.join('') == backwardsArray.join('')) {
    //is a palin
}
else {
 //not a palin
}

Note this will not do type checking. Refer to @Anirudh Ramanathan comment if you want to do type checking as well

Nishanth Matha
  • 5,993
  • 2
  • 19
  • 28