Search code examples
javascripthtmlfunctionif-statementinnerhtml

I'm using pure JavaScript but I continue to get errors that end with "is not a function". How do make it so I can detect words and reply accordingly?

I want to detect a specific word or multiple words within the user's entered text and reply accordingly. I plan to add more words to detect but for now I've been using this. My result is finalKey.contains is not a function.

<html>
<div>
  <p1 id="iOut">🧰</p1>
</div>
<div>
  <input id="uIn" value=""></input>
</div>
<button onclick="regis()">SUBMIT</button>

<script>
  var key = document.getElementById("uIn").value;
  var finalKey = key.toUpperCase();

  function regis() {
    if (finalKey.contains("Hi" || "H")) {
      document.getElementById("iOut").innerHTML = "HEY";

    } else if (finalKey.contains("Bye" || "Goodbye")) {
      document.getElementById("iOut").innerHTML = "Okay";

    } else {
      document.getElementById("iOut").innerHTML = "🧰 Try again";
    }
  }
</script>

</html>

Solution

  • There is no such thing as contains. It is .includes or indexOf != -1

    Your gathering of values needs to be inside the function too

    Also you cannot test two values in one statement unless you turn it around and use an array:

    ["Hi","H"].indexOf(finalKey) !=-1

    or

    ["HI","H"].filter(text => finalKey.startsWith(text)).length > 0

    if you want finalkey to start with either - use .includes if you want to test the complete input

    Lastly you uppercased the text so compare uppercase text

    function regis() {
  var key = document.getElementById("uIn").value;
  var finalKey = key.toUpperCase();

  if (["HI","H"].filter(text => finalKey.includes(text)).length > 0) {
    document.getElementById("iOut").innerHTML = "HEY";
  } else 
    if (["BYE","GOODBYE"].filter(text => finalKey.includes(text)).length > 0) {
    document.getElementById("iOut").innerHTML = "Okay";
  } else // GOOD has to be AFTER GOODBYE to not catch it
    if (["GOOD","GREAT"].filter(text => finalKey.includes(text)).length > 0) {
    document.getElementById("iOut").innerHTML = "That's Good";
  } else {
    document.getElementById("iOut").innerHTML = "🧰 Try again";
  }
}
    <div>
  <p1 id="iOut">🧰</p1>
</div>
<div>
  <input id="uIn" value="" />
</div>
<button type="button" onclick="regis()">SUBMIT</button>

    Using regular expression and word boundaries

    Note I wrapped in a form, now you can just hit enter too

    const wordList = [
  { list: ["HI", "H"], answer: "HEY" },
  { list: ["BYE", "GOODBYE"], answer: "Okay" },
  { list: ["GOOD", "GREAT"], answer: "That's good" }
];

const defaultText = "🧰 Try again";

document.getElementById("inputForm").addEventListener("submit", e => {
  e.preventDefault()
  const input = document.getElementById("uIn").value.trim().toUpperCase();
  let result = wordList
    .filter(({ list, answer }) => list
      .filter(word => new RegExp("\\b" + word + "\\b").test(input))
      .length > 0);
      
  console.log(result)
  document.getElementById("iOut").innerHTML = result.length > 0 ? result[0].answer : defaultText;
})
    <div>
  <p1 id="iOut">🧰</p1>
</div>
<form id="inputForm">
  <div>
    <input id="uIn" value="" />
  </div>
  <button>SUBMIT</button>
</form>