Question

我的回文检查器不再输入以下方法lengthChecker（），并且不再考虑每当一个单词不是回文时，会发出一条警告信息，说明它不会出现回文。可能是什么问题？我也想要它，因此在警报消息上显示用户的输入，而不是[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>

以下是JS：

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);
});

Answer 1

不要使代码过于复杂。正如流行的短语所说，保持简单

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>

遗憾的是，不允许使用反向方法。我必须使用回调函数

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>

Answer 2

el.addEventListener("click", isPalindrome);

应该是

el.addEventListener("click", lengthChecker);

这些函数应该采用字符串参数：

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

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

当触发click事件时，您的代码正在调用isPalindrome，它只是打印出一条消息而不检查该值。顺便说一下，当你的函数被调用时，传入的参数不是字符串，而是一个对象，这就是为什么你要看到文本＆＃34; [object HTMLInputElement]＆＃34;。

回文检查问题

2 个答案: