Question

我正在尝试创建一个回文检查器。现在似乎我的lengthChecker（）不再被调用，只要一个单词不是回文，也不是条件，然后说它不是回文。可能是什么问题？

<!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 {
   alert(str + " -is not a Palindrome");
}
}

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

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

Answer 1

您已在head元素中链接了Javascript，因此在<button id="checkInput">进入DOM之前执行。将其移至body的末尾或将其设为defer红色。

Answer 2

因为在你的页面正确加载之前，你想要访问你的按钮。

当加载DOM时，您需要获取按钮并绑定事件处理程序。

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

回文不正确的结果。

2 个答案: