Prompt the user to type in a character/string and tell whether the input is in a given string

user_16851326 0
Viewed 112

I need to create two functions, to request the user to type in a character and a string. The inputs are matched with a given string.

Then tell the user, if the input character/string is found in the default given string.

So far I have created the basics to get the user inputs, but couldn't find any method to implement the javascript functions. Any help would be highly appreciated.

Here's my code so far..!

<html lang="en"> 
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width shrink-to-fit=no initial-scale=1">
        <title>Web Programming is fun!</title>

        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
            crossorigin="anonymous"
        >
        <style>
            p{display: inline;}
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Web Programming is Fun!</h1>
            <br>
            <p>Lets use the above heading string to demonstrate inbuilt methods.</p>
           
            <label for="inputCharacter">Please type a character: </label>
            <input type="text" id="inputCharacter">
            <button onclick="matchCharacter()">Match Character</button>
            <p id="character"></p>

            <br>

            <label for="inputString">Please type a string: </label>
            <input type="text" id="inputString">
            <button onclick="matchString()">Match String</button>
            <p id="string"></p>
          
            <script>
                let text ="Web programming is fun!";
                function matchCharacter()
                {
                    var char=document.getElementById("inputCharacer").innerHTML;

                    if(char.indexOf(text) )
                    {
                       alert("Your Character is found in the string!")
                    }
                }

                function matchSring()
                {
                    
                }
            </script>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous">
        </script>
        <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous">
        </script>
    </body>
        
</html>

html javascript
2 Answers

I think you have inverted the parameters. Instead of char.indexOf you should use text.indexOf.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf

<html lang="en"> 
    <head> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width shrink-to-fit=no initial-scale=1">
        <title>Web Programming is fun!</title>

        <link rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
            integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
            crossorigin="anonymous"
        >
        <style>
            p{display: inline;}
        </style>
    </head>
    <body>
        <div class="container">
            <h1>Web Programming is Fun!</h1>
            <br>
            <p>Lets use the above heading string to demonstrate inbuilt methods.</p>
           
            <label for="inputCharacter">Please type a character: </label>
            <input type="text" id="inputCharacter" maxLength="1">
            <button onclick="matchCharacter()">Match Character</button>
            <p id="character"></p>

            <br>

            <label for="inputString">Please type a string: </label>
            <input type="text" id="inputString">
            <button onclick="matchString()">Match String</button>
            <p id="string"></p>
          
            <script>
                let text ="Web Programming is Fun!";
                function matchCharacter()
                {
                    var char=document.getElementById("inputCharacter").value;

                    
                    if(text.indexOf(char) != -1)
                    {
                       alert("Your Character is found in the string!")
                    } else {
                      alert("Your Character is not found in the string!")
                    }
                }

                function matchString()
                {
                    var string=document.getElementById("inputString").value;

                
                if(text.indexOf(string) != -1)
                {
                   alert("String Found in heading!")
                } else {
                  alert("String not found in the heading!")
                }
                }
            </script>
        </div>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
         integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
         crossorigin="anonymous">
        </script>
        <script
         src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
         crossorigin="anonymous">
        </script>
    </body>
        
</html>

user_66739590

Inside your javascript you can replace innerHTML to value attribute to access user input and then match that character. And also you are calling indexOf on character but you have to call it on the text variable that you have created.

              
                <script>
                    let text ="Web programming is fun!";
                    function matchCharacter()
                    {
                        var char=document.getElementById("inputCharacer").value;

                        if(text.indexOf(char) !== -1)
                        {
                           alert("Your Character is found in the string!");
                           return true;
                        }
                        return false;

                    }

                    function matchSring()
                    {
                         if (matchCharacter()) console.log("Character is found");
                         else console.log("Character is not found");
                    }
                </script>
user_153917060
Related