I want to use the getElementByID method with the String Includes () method. How can I do that?

Question

On the website I'm making, I have this script that checks if a user has typed in a certain key phrase, and calls a function if the key phrase has been submitted.

function onClick() {
                if (document.getElementById("user_input").value === "I hate the EU!")
                {
                    antiEuropeExample();
                }

Basically if the user input is exactly "I hate the EU;" the antiEuropeExample(). function calls, I want to know if it's possible to have the function look for a keyword. so as long as the keyword is present the function will call, So. instead of having to type exactly "I hate the EU!" you could type "The EU sucks" and the function would still call.

I found this method online:

<script>
function myFunction() {
  var str = "Hello world, welcome to the universe.";
  var n = str.includes("world");
  document.getElementById("demo").innerHTML = n;
}
</script>

which seems promising, but I don't know how to combine the script I've already written and the str.includes method; I don't know if this is even possible, or if there's an easier way to do it. It seems that in this example, you have to define the string yourself in the code, which doesn't help me because the user could type anything into the website (or perhaps I'm misunderstanding the code, I don't know,) I'm currently using just JavaScript, not JQuery. if that helps.

Thank you so much for your help!

Answer 1

In this example for your onClick function you would do exactly as the example you cited performed the check for the keyword.

An example of this in an if statement block would be as follows:

if(document.getElementById("user_input").value.includes("I hate the EU!"))
{
    antiEuropeExample();
}

This conditions returns a boolean of true or false depending on whether the string contained the phrase you passed in as a parameter. You would have to included && within your if statement to specify the minimum conditions for the block to execute eg the string must contain xyz, xyz, and xyz.

Answer 2

Did you want something like this?

 function onClick() { if (document.getElementById("user_input").value.includes("EU")) { //antiEuropeExample(); alert("ANTI EU;!!"); } }

 <input id="user_input"> <button onclick="onClick()">CLick:)</button>

Only a few info: .includes() is case sensitive, so example above will work only if you write EU , not if you will write eu .

If you want to make it case unsensetive, try putting.toUpperCase() before.includes():

 function onClick() { if (document.getElementById("user_input").value.toUpperCase().includes("EU")) { //antiEuropeExample(); alert("ANTI EU;!!"); } }

 <input id="user_input"> <button onclick="onClick()">CLick:)</button>