Is there a short way to find out whether the user input ends with (endsWith()) one of the elements in an array? I would like to check if the user input ends with one of the following suffixes: "ss", "ll", "tt". If the user input ends with one of those suffixes, the code should alert a message saying "condition met", otherwise it should alert "condition failed". I can do it using simple if statements as shown in the following code:
var inp = document.getElementById("inp");
function findingSuffixes(){
if(inp.value.endsWith('ss') || inp.value.endsWith('tt') || inp.value.endsWith('ll')){
alert('condition met')
} else {
alert('condition failed')
}
} <p>Enter a word:</p>
<input type="text" id="inp">
<button onclick="findingSuffixes()">Find out</button>But this is a bit circuitous.
I tried to approach it from a different angle. I created an array and stored the suffixes in it and then looped through that array and passed the array[i] into the endsWith method as an argument, but it didn't work as expected.
var inp = document.getElementById("inp");
suffixes = ["ss", "tt", "ll"];
function findingSuffixes(){
for(var i=0; i < suffixes.length; i++){
if(inp.value.endsWith(suffixes[i])){
alert("condition Met")
} else {
alert("condition failed")
}
}
} <p>Enter a word:</p>
<input type="text" id="inp">
<button onclick="findingSuffixes()">Find out</button>TL'DR: Is there a short way to check whether the user input ends with one of the elements in an array?
The problem with your code is that it issues the alert while still in the loop. You only want it to declare "met" or "failed" when it knows for sure. I adjusted the code to show how this can be done. I use break to exit the loop once we meet the condition since there is no need to look further.
var inp = document.getElementById("inp");
var suffixes = ["ss", "tt", "ll"];
function findingSuffixes(){
var msg = "condition failed";
for(const suffix of suffixes){
if (inp.value.endsWith(suffix)){
msg = "condition Met";
break; // no need to continue in the loop
}
}
alert(msg);
}<p>Enter a word:</p>
<input type="text" id="inp">
<button onclick="findingSuffixes()">Find out</button>You could take a regular experssion and test the string aginst this expression.
/(ll|ss|tt)$/
( ) a group
ll|ss|tt alternatives with ll ss or tt
$ followd by an end of string
function findingSuffixes() {
if (/(ll|ss|tt)$/.test(inp.value)) {
console.log('condition met');
} else {
console.log('condition failed');
}
}
const inp = document.getElementById("inp");<p>Enter a word:</p>
<input type="text" id="inp">
<button onclick="findingSuffixes()">Find out</button>As @Barmar mentions you best use .some()
var inp = document.getElementById("inp"),
sfs = ["ss", "tt", "ll"];
function findingSuffixes() {
alert(sfs.some(sf => inp.value.endsWith(sf)) ? "Condition met"
: "Condition failed");
}<p>Enter a word:</p>
<input type="text" id="inp">
<button onclick="findingSuffixes()">Find out</button>