How do you handle the shift on a Caesar cipher in Javascript?

Question

I'm trying to create a caesar cipher in Javascript and having trouble figuring out how to do the shift. It may be that my approach is complicating it, but I'm trying to understand how to set a max value for adding numbers, but have the addition continue starting from the minimum number. Here is the code I have:

$(document).ready(function(){
var alpha = [];
var encoded = [];
alpha = {
    '1': 'a',
    '2': 'b',
    '3': 'c',
    '4': 'd',
    '5': 'e',
    '6': 'f',
    '7': 'g',
    '8': 'h',
    '9': 'i',
    '10': 'j',
    '11': 'k',
    '12': 'l',
    '13': 'm',
    '14': 'n',
    '15': 'o',
    '16': 'p',
    '17': 'q',
    '18': 'r',
    '19': 's',
    '20': 't',
    '21': 'u',
    '22': 'v',
    '23': 'w',
    '24': 'x',
    '25': 'y',
    '26': 'z'
};
$('#cipher_form').submit(function(event){
    event.preventDefault();
    var input = $('#cipher_input').val();
    var key = $('#cipher_key').val();
    var chars = input.split('');
    for(var i = 0; i<chars.length; i++){
        console.log(chars[i]);
        for(var index in alpha){
            if(alpha[index] == input[i]){
                encoded.push(index);
            }
        }
    }

    for(var i=0; i<encoded.length; i++){
        alert(encoded[i]);

    }

});
});

So when the form submits, I'm grabbing the input value, and turning it into an array of characters. Then I loop through my object and find the key value pair that matches the character and push the key to another array. My plan was to loop through my array of keys and add the cipher_key to that number.

So if the letter 'o' is '15' in my object, and my cipher_key is '5', it would add 15+5 and end up with '20' which would be 't'. The problem I see is if my letter is 'z' and you add 26 + 5, you'll end up with 31 which doesn't exist in my object.

My challenge is finding out how to add the cipher_key to my number all the way to 26, but if it goes over 26, reset and start at 1 and continue the addition. So if the letter is 'z' and the cipher_key is '5' it would take 26+5 and end up at '5' for the letter 'e'.

Is this possible to do? Or is my approach completely wrong on this?

Answer 1

Just have the numbers in simple array, but in order.
var alpha = ['a', 'b', 'c', ... 'z']
Get its number value as var value = alpha.indexOf(the_number);
Then add the cipher key and prevent from going over your amount by using % .
var newNumValue = (value + key) % 26; I guess that's it. It covers the question. Apart from that - your approach was good, yes.
Different approach
Also - if your text might contain some special symbols, i would suggest taking the initial value from ASCII table . It will cover all the symbols plus differ lowercase and uppercase letters. And you don't need to store that array.
var value = yourChar.charCodeAt(0);
To get symbol back from the ascii code, go var symbol = value.fromCharCode();
Hope this helps.