回文检查器问题
Palindrome checker issue
我的回文检查器不再输入以下方法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>
遗憾的是,反向方法是不允许的。我必须使用回调函数
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>
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.");
}
当点击事件被触发时,您的代码将调用isPalindome,它只是打印出一条消息,而不检查值。顺便说一句,当你的函数被调用时,传递的参数不是字符串,而是一个对象,这就是你看到文本"[object HTMLInputElement]"的原因。
相关文章:
- 检查xmlhttprequest问题的消息
- html单选按钮检查问题
- 在javascript中检查文件扩展名的问题
- 如何在纯 javascript 中检查元素是否有 ID?和条件语句问题
- 使用 jQuery 检查多个提交按钮时出现问题
- 当您检查时,引导按钮类重复,我怎么能解决这个问题
- jQuery 可排序问题开/关检查
- 单击时检查 Javascript 主要问题
- 检查数组是否包含数字(问题为 0)
- jQuery脚本,用于检查输入是否有任何值.IE 和 Chrome 中的问题
- 未能使用节点检查器进行调试-出现了什么问题
- 检查是否定义了对象/函数(JavaScript、Safari问题)
- 放置图像数据不起作用检查现有问题
- 在使用JQUERY提交之前检查表单输入值时出现问题
- 在检查两个数值是否都存在时出现JavaScript问题
- 检查密码匹配问题(JavaScript)
- 回文检查器问题
- jQuery检查LI's content-基于内容添加特定类-jQuery出现问题's$(这个)
- 在为几个问题检查了多个复选框后,如何停止检查复选框
- Javascript问题检查值是否为偶数