How to use a JavaScript function outside a HTML

Question

Here is my 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>

Here is my .js file:

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;

I am trying to call palindrome() function in my HTML once the user clicks the submit button. However, the page is not acting as what I thought it would do. I don't know which part of the code I have messed up with. When I click the submit button, nothing new shows up at my History part which it should be if my javascript is correct. Any advice how should I fix this?

what errors are you getting in your browser developer tools console — Jaromanda X
– Jaromanda X, Commented Apr 5, 2017 at 0:54

m1kael · Accepted Answer · 2017-04-05 03:37:55Z

Module loading won't work in browsers yet.

Of course, this should be all done unobtrusively, and without using global objects, but as a starting point, use this corrected version of your code to make it work:

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>

JS

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

Thank you so much! It works! The words show up at history block now. And may I ask for one more favor? I saw you using .innerText to change the content of li. Can I change the class of li too? I was trying to approach that by using li.class which seems not working. Is there a way to do that
You're welcome. To change the class, use the className property instead. I've update the code in the answer.

Collectives™ on Stack Overflow

How to use a JavaScript function outside a HTML

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related