如何使用JavaScript功能的HTML

這外面是我的HTML：如何使用JavaScript功能的HTML

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <title>Palindrome Checker</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="../public/css/palindromes.css" /> 
    <script type="text/javascript" src="./palindromeCheck.js"></script> 
    </head> 
    <body> 
     <header> 
      <a href="./index.html"><img src="../public/images/Palindrome.png" alt="logo" width="350" /></a> 
      <h3> Palindrome Checker: </h3> 
     </header> 
    <form name="textarea" id="form3" autocomplete="off" method="get"> 
     <fieldset> 
      <legend class="legend">What phrase do you want to check: </legend> 
      <label class="labelitem">Input phrase:</label> 
      <input type="text" name="input" id="input" size="40" maxlength="40" 
       placeholder="Your Phrase Here" required pattern="[a-zA-Z][a-zA-Z'\- ]*" 
       title="Just Input the Phrase" /> 
      <button type="submit" id="submit" class="btn btn-default">Submit</button> 
      <br /> 
      <script> 
       document.addEventListener("submit", palindrome(document.getElementById("input")); 
      </script> 
     </fieldset><br/> 

     <fieldset> 
      <legend class="legend">History: </legend> 
      <ul id="history"> 
       <li class="is_palindrome">aba</li> 
       <li class="not-palindrome">abc</li> 
       <li class="not-palindrome">aeraa</li> 
      </ul> 
     </fieldset> 

     </form> 
     <br /> 
     <br /> 
     <footer id="footnote"> 
      Weizhe Dou 
      <br /> 
      ID:10400406 
      <br /> 
      copyright reserved 
     </footer> 
    </body> 
</html>

這裏是我的.js文件：

let exportedMethods = { 
    isPalindrome(txt) { 
     var isP = true; 
     if(txt.length() == 1){ 
      return true; 
     } 
     for(i = 0; i < (txt.length())/2; i++){ 
      if(txt[i] != txt[txt.length()-1-i]){ 
       isP = false; 
      } 
     } 
     return isP; 
    }, 

    palindrome(txt) { 
     var list = getElementById('history'); 
     var li = createElement("li"); 
     var str = txt.trim(); 
     li.appendChild(str); 
     var isPalindrome = isPalindrome(str); 
     if(str.length()){ 
      if (isPalindrome) { 
      li.class = 'is-palindrome' 
      } 
      else{ 
      li.class = 'not-palindrome' 
      } 
     } 
     list.appendChild(li); 
    } 
} 

module.exports = exportedMethods;

我想打電話給迴文（）函數我的HTML一旦用戶點擊提交按鈕。但是，該頁面並不像我認爲的那樣行事。我不知道我已經搞亂了哪部分代碼。當我點擊提交按鈕時，在我的歷史部分沒有新的東西顯示出來，如果我的javascript正確，它應該是。任何建議我應該如何解決這個問題？

來源

2017-04-05 Tom.D

你在瀏覽器中得到了什麼錯誤**開發人員**工具控制檯 –

模塊加載在瀏覽器中不起作用。

當然，這應該是所有做不顯眼，並且不使用全局對象，但作爲一個出發點，用你的代碼，這個修正版本，使其工作：

HTML

<!DOCTYPE html> 
<html lang="en-US"> 
    <head> 
    <title>Palindrome Checker</title> 
    <meta charset="utf-8" /> 
    <link rel="stylesheet" type="text/css" href="../public/css/palindromes.css" /> 
    <script type="text/javascript" src="./palindromeCheck.js"></script> 
    </head> 
    <body> 
     <header> 
      <a href="./index.html"><img src="../public/images/Palindrome.png" alt="logo" width="350" /></a> 
      <h3> Palindrome Checker: </h3> 
     </header> 
    <form name="textarea" id="form3" autocomplete="off" method="get"> 
     <fieldset> 
      <legend class="legend">What phrase do you want to check: </legend> 
      <label class="labelitem">Input phrase:</label> 
      <input type="text" name="input" id="input" size="40" maxlength="40" 
       placeholder="Your Phrase Here" required pattern="[a-zA-Z][a-zA-Z'\- ]*" 
       title="Just Input the Phrase" /> 
      <button type="submit" id="submit" class="btn btn-default">Submit</button> 
      <br /> 
      <script> 
       document.addEventListener("submit", function (e) { palindrome(document.getElementById("input")); e.preventDefault(); }); 
      </script> 
     </fieldset><br/> 

     <fieldset> 
      <legend class="legend">History: </legend> 
      <ul id="history"> 
       <li class="is_palindrome">aba</li> 
       <li class="not-palindrome">abc</li> 
       <li class="not-palindrome">aeraa</li> 
      </ul> 
     </fieldset> 

     </form> 
     <br /> 
     <br /> 
     <footer id="footnote"> 
      Weizhe Dou 
      <br /> 
      ID:10400406 
      <br /> 
      copyright reserved 
     </footer> 
    </body> 
</html>

function isPalindrome(txt) { 
    var isP = true; 
    if(txt.length == 1){ 
     return true; 
    } 
    for(i = 0; i < txt.length/2; i++){ 
     if(txt[i] != txt[txt.length-1-i]){ 
      isP = false; 
     } 
    } 
    return isP; 
}; 

function palindrome(txt) { 
    var list = document.getElementById('history'); 
    var li = document.createElement("li"); 
    var str = txt.value; 
    li.innerText = str; 
    if(str.length){ 
     if (isPalindrome(str)) { 
     li.className = 'is-palindrome' 
     } 
     else{ 
     li.className = 'not-palindrome' 
     } 
    } 
    list.appendChild(li); 
};

來源

2017-04-05 01:27:19 m1kael

非常感謝！有用！現在，這些詞出現在歷史街區。我可以再要求一個更多的青睞嗎？我看到你使用.innerText來改變li的內容。我能改變李的班嗎？我試圖通過使用li.class來處理這似乎不工作。有沒有辦法做到這一點 –

不客氣。要改變類，請改用'className'屬性。我已經更新了答案中的代碼。 – m1kael

如何使用JavaScript功能的HTML

回答

相關問題