How to create an input box

HOW TO CREATE AN INPUT BOX USING HTML AND JAVASCRIPT

In this lesson I will show you how to create a box where you can type data in it, then click Confirm to get results, or by pressing the Enter key.

There will be two ways of doing this code. First way is by using the Switch and Case functions. The other one is by using the If statements.

The first code is for the Switch and Case functions using a button to let the computer take actions. Remember, the letters for putting the data in are case sensitive, such as "blue" and "yellow".

Note: If you want to use the Enter feature instead of clicking the button feature for this code or the second one, simply look for the blue code below, highlight it all and replace it with this:
<input onkeypress="btn001()" id="input001" type="text" />

Code:
_______________________________________________________________
<!DOCTYPE html>
<html>
<head>
<title>Input</title>
</head>
<body>

<input id="input001" type="text" /><button onclick="btn001()">Confirm</button>
<p id="message001"></p>

<script>
function btn001() {
var text001;
var colors001 = input001.value;
switch (colors001) {
case "blue":
text001 = "The color is blue";
break;
case "yellow":
    text001 = "The color is yellow";
    break;
    default:
            text001 = "Sorry. Can't recognize this color.....";
}
document.getElementById("message001").innerHTML = text001;
}
</script>
</body>
</html>

If you want to watch the video and see how it is done, you can check it out below.

Here is the second code using the same ID names, but this time I am using the If statements.

Code:
_______________________________________________________________
<!DOCTYPE html>

<html lang="en" xmlns="http://www.ikhtabirni.com">
<head>
    <meta charset="utf-8" />
    <title>Input</title>
</head>
<body>
<input id="input001" type="text" /><button onclick="btn001()">Confirm</button>
    <p id="message001"></p>
    <script>
        function btn001() {
            var text001;
            var colors001 = input001.value;
            if (colors001 == "blue") {
                text001 = "the color is blue";
                document.getElementById("message001").innerHTML = text001;
            }
        if (colors001 == "yellow") {
            text001 = "The color is yellow";
            document.getElementById("message001").innerHTML = text001;
        }
        if (colors001 !== "blue" && colors001 !== "yellow") {
            text001 = "Sorry. Can't recognize this color.....";
            document.getElementById("message001").innerHTML = text001;
        }
        }
    </script>
</body>
</html>

If you want to watch the video and see how it is done, you can check it out below.

Other Topics:

Islamic Holidays
Health Tips
Sports Facts