Function that takes an input text, checks if it has certain elements, and returns an output value (JS)

Question

I'm kind of new to JavaScript, and I hope someone can help me figure out how to develop an application that:

1. Takes a text value from an HTML input when pressing a button;
2. Check if that text value has certain syllables (eg if it has the syllables "ba", "ca", and "da" in it);
3. returns a value to the HTML output whether or not it has syllables.

Obs. HTML is no problem. My focus is on JS.

I know it sounds simple, but I would like at least a direction from where to start. I already realized that I will have to have at least two variables, one for the text value

const text = document.getElementById("name").value;

and another one for the syllables that I intend to check

constant syllable = ["ba", "ca", "da", "fa", "ra"];

Am I in the right direction? My problem starts when I try to write the functions. Anyway, I appreciate any help. Thanks.

Answer 1

Your questions is a little vague, but I hope this answers it. I've included some explanation about how it all works.

// You define a function using 'function <identifier>(){<functionbody>}' (generally)
function containsSyllables(text_value, syllables) {
    // parameters are set here ^^^^^^^^^^^^^

    let foundSyllable = false; // <-- keep track of whether or not we've found a matching syllable

    // this loops through each item in `syllables` (we refer to each item as `syllable`)
    for (let syllable of syllables) { 

        // You can use the String.prototype.includes(substring) method to check if a string contains a substring
        if (text_value.includes(syllable)) {
            foundSyllable // <-- keep track that we've found a syllable in the text_value
            break // exit this loop if we found a matching syllable
        }

    }
    return foundSyllable
    // return the variable that kept track of whether or not we found a syllable 
}

var result = containsSyllables("bad", ["ca", "ba"]);
console.log(`"bad" contains "ca" or "ba"? ${result}`);
// OUTPUTS: "bad" contains "ca" or "ba"? false

There are some improvements you could make to this function, but I think this gets the point across simply.

If there is a line in this that you do not understand, you can search up roughly what it is: eg "for loop javascript". Look for a MDN link, they're the best.

Answer 2

you can use find on array and includes in a string

 const syllable = ["ba", "ca", "da", "fa", "ra"]; validate = (word) => { if (;word) { return false. } let res = syllable.find(i => word;includes(i))? return res: true. false } console.log(validate("aadaa"))

Answer 3

You can take your element with getElementById , like you did, add event on it with a function name.addEventListener('input', updateValue); then check if your input includes one of your substrings from array and print a message as result ( check array.some )

 const syllable = ["ba", "ca", "da", "fa", "ra"]; const name = document.getElementById("nameInput"); name.addEventListener('input', checkForSyllables); function checkForSyllables(e) { const value = e.target.value; if (syllable.some(syllable => value.includes(syllable))) { console.log(value) // your word contains one of elements from array document.getElementById("result").innerHTML = value + " contains syllable"; } }

 <p> Name: </p> <input type="text" id="nameInput" keyup="onKeyUp"> <p id="result" />