如何在HTML外部使用JavaScript函数_Javascript_Html

如何在HTML外部使用JavaScript函数

javascript html

如何在HTML外部使用JavaScript函数,javascript,html,Javascript,Html,这是我的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" />

这是我的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中的回文函数。然而，这个页面并不像我想象的那样。我不知道我弄乱了代码的哪一部分。当我单击submit按钮时，在我的历史记录部分没有显示任何新内容，如果我的javascript是正确的，则应该是新内容。有什么建议我应该如何解决这个问题吗？

模块加载在浏览器中还不起作用

当然，这一切都应该低调地完成，并且不使用全局对象，但作为起点，请使用经过更正的代码版本使其正常工作：

HTML

您的浏览器开发工具控制台中出现了哪些错误？非常感谢！它起作用了！这些词现在出现在历史街区。我可以再请你帮我一个忙吗？我看到您使用.innerText来更改li的内容。我也能换个李班吗？我试图通过使用li.class来实现这一点，但它似乎不起作用。有办法吗？不客气。要更改类，请改用className属性。我已经更新了答案中的代码。

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