Search code examples
javascriptforms

How can I check if a user's form input contains a keyword from my array?


On my webpage, I have a form at the top where the user answers a simple question. If their answer contains a keyword from one of 4 arrays I've created, the page will scroll to a particular element on the page. Currently, their answer has to be the exact keyword; but I would like it to work if the answer contains the keyword (e.g. the word "climb" is on the list, but I would like it to still behave the same way if the user types in "climbing" or "I like climbing," etc.)

Before creating the arrays of keywords, I was using just one keyword for each element and using includes(). With this method, it worked the way I hoped (the input only had to contain the keyword, but if there were additional words/letters, it behaved the same way). However, I'd like to use multiple keywords for each element, so now I am using arrays and indexOf(); and this way, the input has to be the exact word (i.e. the word "climbing" gets the "sorry try again" response, rather than scrolling to the relevant element as the word "climb" would).

function answerQuestion() {
      event.preventDefault();
      var answer = document.getElementById("answer").value;
      answer = answer.toLowerCase();
      answer = answer.trim();
      const hallasanKeyword = [
        "hiking",
        "climb",
        "hike",
        "outside",


      ];
      const udoKeyword = [
        "cycling",
        "cycle",
        "bike",
        
      ];
      const lovelandKeyword = [
        "art",
        "fun",
        "silly",

      ];
      const cityKeyword = [
        "nightlife",
        "restaurant",
        "eat",
       
      ];

      if (hallasanKeyword.indexOf(answer) !== -1) {
        var hallasan = document.getElementById("hallasan").offsetTop;
        window.scrollTo({ top: hallasan, behavior: "smooth" });
      } else if (udoKeyword.indexOf(answer) !== -1) {
        var udo = document.getElementById("udo").offsetTop;
        window.scrollTo({ top: udo, behavior: "smooth" });
      } else if (lovelandKeyword.indexOf(answer) !== -1) {
        var loveland = document.getElementById("loveland").offsetTop;
        window.scrollTo({ top: loveland, behavior: "smooth" });
      } else if (cityKeyword.indexOf(answer) !== -1) {
        var city = document.getElementById("city").offsetTop;
        window.scrollTo({ top: city, behavior: "smooth" });
      } else {
        alert(
          "Sorry, what you typed in didn't match any of the keywords on our list! Try something else, or scroll through this page - you might find something you'd like!"
        );
      }
    }

Solution

  • Check this out https://jsfiddle.net/subeeshamie/jueLghdq/23/

     var answer = 'I like climbing';
     
     const hallasanKeyword = [
       "hiking",
       "climb",
       "hike",
       "outside",
    
    
     ];
     const udoKeyword = [
       "cycling",
       "cycle",
       "bike",
    
     ];
     const lovelandKeyword = [
       "art",
       "fun",
       "silly",
    
     ];
     const cityKeyword = [
       "nightlife",
       "restaurant",
       "eat",
    
     ];
    
     if ((hallasanKeyword.filter(arItem => answer.includes(arItem))).length > 0) {
       alert('scroll to hallasan')
     } else if ((udoKeyword.filter(arItem => answer.includes(arItem))).length > 0) {
       alert('scroll to udo')
     } else if ((lovelandKeyword.filter(arItem => answer.includes(arItem))).length > 0) {
       alert('scroll to loveland')
     } else if ((cityKeyword.filter(arItem => answer.includes(arItem))).length > 0) {
       alert('scroll to city')
     } else {
       alert(
         "Sorry, what you typed in didn't match any of the keywords on our list! Try something else, or scroll through this page - you might find something you'd like!"
       );
     }