Onscreen keyboard

Question

My code below is for a sort of onscreen keyboard. I was just wondering if it could be written shorter with a lot of ifs and elses.

function input(key) {
 fieldName = currentSide+'_scratchfield';
 field = document.getElementById(fieldName);
 del = "DELETE";
 if(key == 'sp') key = ' ';
 if(key == 'minus') {
 if(field.value == del) {
 return false;
 } else if(field.value.charAt(0) == "-") {
 field.value = field.value.substr(1, field.value.length);
 return false;
 } else {
 field.value = "-"+field.value;
 return false;
 }
 }
 if(key == 'clr') { 
 if(field.value == "" || field.value == null) {
 return false;
 } else if (field.value == del) {
 field.value = "";
 return false;
 } else {
 field.value = field.value.substring(0, field.value.length-1); 
 return false;
 }
 }
 if(key == 'del') { 
 if(field.value == "" || field.value == null) {
 key = del;
 } else if(field.value == del) {
 field.value = "";
 return false;
 } else {
 field.value = ""; 
 key = del;
 }
 }
key = key.toUpperCase();
if(field.value == del) { field.value = ""; }
field.value += key;
}

• Flambino: I'm not sure I understand the logic: If a user inputs the "del" key, the field's value is set to the string "DELETE", meaning that the next input will set the field's value to "" instead of its usual effect - except if the next key is "sp", which will just set the field to " ". I'm confused as to what the purpose of this is.

Answer 1

I am not sure about getting it shorter, but it could be improved.

• Indentation is a bit of a problem, check out http://jsbeautifier.org/ and paste your code to see what I mean
• Use var to declare your variables!
• If you return in an if block, then you don't need an else if block, just if will do
• Your code needs more comment, if(key == 'sp') <- what does sp mean ??
• I wish we had more code so that we could give a more insightful review
• You can replace if(field.value == "" || field.value == null) { with if(!field.value)
• You can skip the curly braces of an if, but you should not skip the newlines.

All in all, that makes something like this:

function input(key) {
 var fieldName = currentSide + '_scratchfield',
 field = document.getElementById(fieldName),
 del = "DELETE";
 if(key == 'sp')
 key = ' ';
 if(key == 'minus'){
 if(field.value == del)
 return false;
 if(field.value.charAt(0) == "-") {
 field.value = field.value.substr(1, field.value.length);
 return false;
 }
 field.value = "-"+field.value;
 return false;
 }
 if(key == 'clr'){
 if(!field.value)
 return false;
 if (field.value == del){
 field.value = "";
 return false;
 }
 field.value = field.value.substring(0, field.value.length-1);
 return false;
 }
 if(key == 'del'){
 if(!field.value)
 key = del;
 if(field.value == del) {
 field.value = "";
 return false;
 }
 field.value = "";
 key = del;
 }
 key = key.toUpperCase();
 if(field.value == del)
 field.value = "";
 field.value += key;
}

• douwe12345: Thankyou! Sp stands for &nbsp;. I was more wondering if it could be written with less if/else statements! Thanks so far though!