I have a textbox on my website and the user can input commands. But the thing is the commands are case sensitive. How do I make the commands not case sensitive? Here is my code:
JavaScript:
function showAlert() {
var txtCtrl = document.getElementById("textbox1");
var txtVal = txtCtrl.value;
if (txtVal == '') {
alert('Please fill in the text box. For a list of commands type "Help" into the text box.');
}else if (txtVal == 'Start' || txtVal == 'start') {
alert('Hello. What would you like me to do?');
}else if (txtVal === 'Weather' || txtVal === 'weather') {
window.location = "https://www.google.com/#q=weather";
}else if (txtVal === 'Time' || txtVal === 'time') {
alert('The current time according to your computer is' + formatTime(new Date()));
}else if (txtVal === 'Help' || txtVal === 'help') {
window.location = "help/index.html";
}else if (txtVal === 'Donate' || txtVal === 'donate') {
window.location = "donate/index.html";
}else if (txtVal === 'www.' || txtVal === 'WWW.') {
}else{
alert('Sorry, I do not reconise that command. For a list of commands, type "Help" into the text box.');
}
}
//Show time in 24hour format
function showTime(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
return [ h, m ].join(':')
}
//Show time in 12hour format
var formatTime = (function () {
function addZero(num) {
return (num >= 0 && num < 10) ? "0" + num : num + "";
}
return function (dt) {
var formatted = '';
if (dt) {
var hours24 = dt.getHours();
var hours = ((hours24 + 11) % 12) + 1;
formatted = [formatted, [addZero(hours), addZero(dt.getMinutes())].join(":"), hours24 > 11 ? "PM" : "AM"].join(" ");
}
return formatted;
}
})();
And HTML:
<!doctype html>
<html>
<head>
<title>Random Project</title>
</head>
<style type="text/css">
body {
margin:0;
font-family: arial, sans-serif;
padding-top: 80px;
}
.container {
margin:auto;
text-align:center;
}
.logo {
margin:auto;
width:512px;
text-align:center;
padding-bottom:0px;
}
#textbox1 {
border: 1px solid #ddd;
border-radius: 0px 0px 0px 0px;
width: 512px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 7px;
padding-right: 7px;
height: 20px;
font-size: 16px;
outline: none;
font-family: arial, sans-serif;
}
#textbox1:focus {
border: 1px solid #0266C8;
}
#button1 {
margin-top: 22px;
padding: 2px 10px 2px 10px;
outline:none;
background-color:#eee;
border:1px solid #ddd;
border-radius:2px;
}
#button1:hover {
background-color: #f5f5f5;
}
#button1:focus {
border: 1px solid #0266C8;
}
#button1_text {
font:bold 11px/27px Arial,sans-serif!important;
color:#333;
}
.information {
font-size:12px;
color:#555;
}
.separator {
height:100px;
}
.tip {
color:green;
font-weight:bold;
font-size:12px;
margin-top:10px;
}
.tip_text {
color:#111;
font-weight:normal;
}
</style>
<body>
<div class="container">
<img class="logo" src="logo.png" width="450" height="110" alt="Random Project">
<input type="text" name="textbox1" value="" spellcheck="false" dir="ltr" placeholder="Type here" id="textbox1"><br>
<button id="button1" name="button1" aria-label="Help me" onClick="showAlert();">
<span id="button1_text">Help me</span>
</button>
<div class="separator"></div>
<span class="information">© Copyright DemDevs 2013. All rights reserved. Made by Omar Latreche<br><a href="donate/index.html">Donate now</a></span>
<div class="tip">
<span class="tip">Tip: </span><span class="tip_text">The commands are NOT case sensitive</span>
</div>
</div>
<div class=""></div>
</body>
</html>
Any help will be greatly appreciated.
Thanks, Omar!
Edit:
I figured it out, I made two new variables:
var txtValUpper = txtVal.toUpperCase();
and
var txtValLower = txtVal.toLowerCase();
then put them into the code for example:
if (txtValUpper == 'start' || txtValLower == 'start')
{
alert('Hello. What would you like me to do?');
}
To case insensitively compare strings, convert them to consistent case first.
if ("Foo".toLowerCase() === "fOo".toLowerCase())
You can convert string to uppercase and compare them
if(txtVal.toUpperCase() === "Donate".toUpperCase())
After this line
var txtVal = txtCtrl.value;
txtVal = txtVal.toLowerCase();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With