我的回文检查器不再输入以下方法 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);
});
最佳答案
不要使代码过于复杂。正如流行的一句话所说，保持简单
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>关于javascript - 回文检查器问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33602318/