Home>

(1) I would like to be alerted like ① and ② when selecting replace and match.

①replace: Replace the input character with "Changed" and apply it to the input box
②match: English and numbers alternate one character at a time

(2) Also, please let me know if there is a way to write more concisely because the code is duplicated.

<html>
<head>
<meta charset = "utf-8">
<meta robot = "noindex">
</head>
<body>
    <form action = "cgi-bin/formmail.cgi" method = "post">
        <p>
        Value to be processed:<input type = "text" name = "name" size = "40">
        </p>
        <p>mode:
        <select name = "blood">
            <option value = "choice">Please select</option>
            <option value = "slice">slice</option>
            <option value = "split">split</option>
            <option value = "substr">substr</option>
            <option value = "trim">trim</option>
            <option value = "length">length</option>
            <option value = "replace">replace</option>
            <option value = "match">match</option>
        </select></p>
        <button type = "button" onclick = "clicker ();">Execute</button>
    </form>
    <script>
        function clicker () {
            var input = document.getElementById ('input'). value;
            var result = input.length;
            if (result<10) {
                alert ('Please enter at least 10 characters');
            }
            var option = document.getElementsByTagName ('option');
            if (option [0] .selected) {
                alert ('Please choose another option');
            }
            var option = document.getElementsByTagName ('option');
            var slice = input.slice (0,5);
            if (result>= 10&&option [1] .selected) {
                alert (slice);
            }
            var option = document.getElementsByTagName ('option');
            var split = input.split ('in');
            if (result>= 10&&option [2] .selected) {
                alert (split);
            }
            var option = document.getElementsByTagName ('option');
            var substr = input.substr (3,6);
            if (result>= 10&&option [3] .selected) {
                alert (substr);
            }
            var option = document.getElementsByTagName ('option');
            var trim = input.trim ();
            if (result>= 10&&option [4] .selected) {
                alert (trim);
            }
            var option = document.getElementsByTagName ('option');
            var length = input.length;
            if (result>= 10&&option [5] .selected) {
                alert (length);
            }
        }
    </script>
</body>
</html>
  • Answer # 1

    There is no need to re-check the option many times.

    switch (document.forms [0] .elements ['blood']. value) {
                    // Abbreviation
                    case 'replace':
                        {
                            let replace = input.replace (/.*/, 'changed');
                            document.forms [0] .elements ['name']. value = replace;
                            alert (replace);
                        }
                        break;
                    case 'match':
                        alert (!! input.match (/ [a-zA-Z] [0-9] /));
                        break;
                }

  • Answer # 2

      

    (2) Also, please let me know if there is a way to write more concisely because the code is duplicated.

    For example, you can write like this.

    function clicker () {
        var select = document.getElementsByTagName ("select") [0];
        var holder = document.getElementById ('input');
        var input = holder.value;
        var result = input.length;
        if (result<10) {
            alert ('Please enter at least 10 characters');
            return;
        }
        var option = document.getElementsByTagName ('option');
        var func = {
            choice: () =>{alert ('Please choose another option');},
            slice: () =>{alert (input.slice (0,5));},
            split: () =>{alert (input.split ('in'));},
            substr: () =>{alert (input.substr (3,6));},
            trim: () =>{alert (input.trim ());},
            length: () =>{alert (input.length);},
            replace: () =>{holder.value = "changed";alert (holder.value);},
            match: () =>{
                // "English and numbers alternate one character at a time"
                // ↑ It is not possible to implement because there is no description of what to do if this condition is met.
            },
        };
        func [option [select.selectedIndex] .value] ();
    }