I am currently writing an app that converts musical keys. In a nutshell the conversion part of the script, is one giant if / then statement (if the user selected A then display B, etc etc.).
While this works perfectly fine, I definitely feel like this is fairly crude, and extremely lengthy, with all of the keys that need to be converted.
The following is an excerpt of the conversion function. It should be fairly readable, but basically the function first checks to make sure they've selected two keys (in this example C and B♭) and then checks the note (and whether or not it's sharp or flat), and then puts the correct answer in a couple of divs I have on the page (.noteName
and .supNote
).
//C to Bb Conversion
if (firstInstSelected == "C" && secondInstSelected == "Bb") {
if (firstNote == "A" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("B");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "A" && secondNote == "sharp" || firstNote == "B" && secondNote == "flat") {
$('#' + btnLabelSelected).find('.noteName').text("C");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "B" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("C");
$('#' + btnLabelSelected).find('.supNote').text("#");
return false;
}
if (firstNote == "C" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("D");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "C" && secondNote == "sharp" || firstNote == "D" && secondNote == "flat") {
$('#' + btnLabelSelected).find('.noteName').text("E");
$('#' + btnLabelSelected).find('.supNote').text("b");
return false;
}
if (firstNote == "D" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("E");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "D" && secondNote == "sharp" || firstNote == "E" && secondNote == "flat") {
$('#' + btnLabelSelected).find('.noteName').text("F");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "E" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("F");
$('#' + btnLabelSelected).find('.supNote').text("#");
return false;
}
if (firstNote == "F" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("G");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "F" && secondNote == "sharp" || firstNote == "G" && secondNote == "flat") {
$('#' + btnLabelSelected).find('.noteName').text("A");
$('#' + btnLabelSelected).find('.supNote').text("b");
return false;
}
if (firstNote == "G" && secondNote == undefined) {
$('#' + btnLabelSelected).find('.noteName').text("A");
$('#' + btnLabelSelected).find('.supNote').text("");
return false;
}
if (firstNote == "G" && secondNote == "sharp" || firstNote == "A" && secondNote == "flat") {
$('#' + btnLabelSelected).find('.noteName').text("B");
$('#' + btnLabelSelected).find('.supNote').text("b");
return false;
} else {
$('#' + btnLabelSelected).find('.noteName, .supNote').text("");
$('#' + btnLabelSelected).find('.noteFont').removeClass('hide');
}
}
As you can see, this is really lengthy, and the app needs to have a bunch of these, so as you might imagine, that's a seriously long / redundant function.
I thought about perhaps maybe putting the correct answers into an array, and trying to grab the right answer from the array, but I'm sure if that would really save me any code length? (because I still would need a bunch of conditions, if the person selected keys C and B♭ and then the note A, etc etc.)
I'm hoping some of you JavaScript / jQuery wizards out there might have an alternative solution for me to shorten this up and make it more compact.