JS and HTML Help

Hello everyone, I am trying to put together a simple application that checks if a word is a palindrome or not and then adds the word to a list that either says Is a palindrome or is not a palindrome. I am trying to solve this without using JQuery. My question is what should I add to the JS to push the word into a list on the HTML page and what should I add to make the submit button start the function. Thanks for all of your time and help.

Here is my JS:

const palindrome = function(str){
    for(var i = 0; i<str.length; i++){
      for (var j= str.length - 1; j >= 0; j--){
        
        if (str[i] === str[j]){
        return "Is a palindrome"
        }
            else {
            return "Is not a palindrome"
            }

      }    
      }          
};


Here is my HTML: 

<!DOCTYPE html>
<html lang="en">
<head>

  <title>palindrome</title>
  <style>
    /* CSS */
  </style>
  <script>
    // JAVASCRIPT
  </script>
</head>

<body>
    <h1>IS THIS A PALINDROME?!</h1>
<form>
    <!--field for word input-->
    <form>
        <input type = "text"><br>
        <input type="submit" value="Submit">
    </form>
  
    <!--lists of palindromes/non palindromes-->
</body>

First, you have two opening form tags and only one closing form tag. I would get rid of that first one.

1 Like

@aditshah10, You’re going to probably need to do a bit of research to understand how to adding and removing elements to the DOM works.

I recommend starting with something simpler, create a <li></li> element manually on your HTML page and change it programmatically to display the text that you want to see. Once you can do this, then you will understand how to select elements with javascript, which you can then use to look into using the ‘[DOM element].appendChild()’ method to start actually appending new <li></li> elements with text that you set.

Some reference that may help you on this is:

https://www.w3schools.com/jsref/dom_obj_document.asp
and then
https://www.w3schools.com/jsref/dom_obj_all.asp

Though, your best bet may be to also find some tutorials. Good luck!

1 Like

@aditshah10 Also, your palindrome function does not work correctly. It only checks the first and last letters to determine if the word is a palindrome or not.

For example, the word elope should return “In not a palindrome.”, but your function says it is a palindrome. It sees that the first e and the last e match. Remember that when a return statement is executed, the function exits immediately.

Once you get your palindrome function working correctly, I would have it just return a true or false value and then you could do something like the following. Note that I changed your second input to a button to simplify the logic.

HTML

<h1>IS THIS A PALINDROME?!</h1>
<form>
  <input type="text" id="word"><br>
  <button id="submit">Submit</button>
</form>
<ul id="palindromes"></ul>

JS

const palindrome = function(str) {
  // return true or false depending if it is a palindrome
};

submit.addEventListener('click', (event) => {
   event.preventDefault();
   if (palindrome(word.value)) {
     palindromes.innerHTML += `<li>${word.value}</li>`;
   }
});
1 Like

Thanks so much for your help, I really really appreciate it.

Checking it out now, thank you so much for sharing.