CODEWITHSUNDEEP
javascripthtml
user1776479
user1776479

Reputation: 31

Palindrome checker issue

My palindrome checker is no longer entering the following method lengthChecker(), and is no longer taking to account that whenever a word isn't a palindrome, an alert message saying its' not palindrome doesn't appear. What could be the issue? Also I want it so show the user's input on the alert message, instead of [object HTMLInputElement]. 

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Lesson #6 Homework</title>
    <script type="text/javascript" src="./js/palindrome.js"></script>
</head>

<body>
    <h1>Is it a Palindrome?</h1>
    <div id="mainCont">
        <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p>
        <p>Word:
            <input type="text" id="str" name="string" />
            <button id="checkInput">Submit</button>
        </p>
    </div>
</body>

</html>

Here is the JS as of now:

function lengthChecker() {
    var str = document.getElementById("str").value;
    if (str.length > 10) {
        alert("Sorry. Your input surpasses the 10 characters maximum. Please try again.")
        return false;
    } else if (str.length == 0) {
        alert("Sorry. Your input is too short, and doesn't meet the 10 characters maximum. Please try again.")
        return false;
    }
    palindrome();
}

function palindrome() {
    var revStr = "";
    var str = document.getElementById("str").value;
    var i = str.length;
    for (var j = i; j >= 0; j--) {
        revStr = revStr + str.charAt(j);
    }
    if (str == revStr) {
        isPalindrome();
    } else {
        notPalindrome();
    }
}

function isPalindrome() {
    alert(str + " is a Palindrome.");
}

function notPalindrome() {
    alert(str + " isn't a Palindrome.");
}

document.addEventListener("DOMContentLoaded", function (e) {
    var el = document.getElementById("checkInput");
    el.addEventListener("click", isPalindrome);
});

Upvotes: 1

Views: 165

Answers (2)

Paul S.
Paul S.

Reputation: 66364

Don't over-complicate your code. As the popular phrase goes, keep it simple

function isPalindrome(str) {
    var backwards = str.split('').reverse().join('');
    return str === backwards;
}

// commented next line for snippet
// document.addEventListener("DOMContentLoaded", function (e) {
    document.getElementById("checkInput").addEventListener(
        "click",
        function (e) {
            var str = document.getElementById("str").value;
            if (str.length > 10) return alert('Too long, max length is 10');
            if (str.length <  1) return alert('Too short, min length is 1');
            if (isPalindrome(str)) return alert('Is a palindrome');
            alert('Not a palindrome');
        }
    );
// commented next line for snippet
// });


// alert -> console.log for snippet
function alert() {
    console.log.apply(console, arguments);
}
<h1>Is it a Palindrome?</h1>
<div id="mainCont">
    <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p>
    <p>Word:
        <input type="text" id="str" name="string" />
        <button id="checkInput">Submit</button>
    </p>
</div>

sadly reverse method isn't allowed. and i have to use a callback function

function reverse(str) {
    var s = '', i = str.length;
    while (i-- > 0) s += str.charAt(i);
    return s;
}

function isPalindrome(str, callback_yes, callback_no) {
    if (str === reverse(str)) {
        callback_yes(str);
    } else {
        callback_no(str);
    }
}

var yes = alert.bind(null, 'Yay'),
    no  = alert.bind(null, 'Nay');

// commented next line for snippet
// document.addEventListener("DOMContentLoaded", function (e) {
    document.getElementById("checkInput").addEventListener(
        "click",
        function (e) {
            var str = document.getElementById("str").value;
            if (str.length > 10) return alert('Too long, max length is 10');
            if (str.length <  1) return alert('Too short, min length is 1');
            isPalindrome(str, yes, no);
        }
    );
// commented next line for snippet
// });


// alert -> console.log for snippet
function alert() {
    console.log.apply(console, arguments);
}
<h1>Is it a Palindrome?</h1>
<div id="mainCont">
    <p>Hello. Please enter a word, and I'll see if it is a palindrome.</p>
    <p>Word:
        <input type="text" id="str" name="string" />
        <button id="checkInput">Submit</button>
    </p>
</div>

Upvotes: 1

Kias
Kias

Reputation: 841

el.addEventListener("click", isPalindrome);

should be

el.addEventListener("click", lengthChecker);

And these functions should take a string argument:

function isPalindrome(str) {
    alert(str + " is a Palindrome.");
}

function notPalindrome(str) {
    alert(str + " isn't a Palindrome.");
}

When the click event is triggered your code is calling isPalindrome which simply prints out a message and does no checking of the value. And by the way, when your function is called the argument passed in not the string, but an object which is why you're seeing the text "[object HTMLInputElement]".

Upvotes: 0

Related Questions