HOW TO CREATE AN INPUT BOX USING HTML AND JAVASCRIPT
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 RELATED PAGES: |