Untitled

<!DOCTYPE HTML>
<html>

<head>
    <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <meta charset="utf-8">

</head>

    <body>
        <select>
            <option value = "crypt" selected>Крипт</option>
            <option value = "decrypt">Декрипт</option>
        </select>
        <textarea id="before" >Enter text here...</textarea>
        <button>click me</button>
				<script>
		var select = document.querySelector('select');
    var button =  document.querySelector('button');
    var alf = "qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM .,";

    button.addEventListener('click', function(){
        var text = $("#before").val();
        console.log(text);
        if (select.value=="crypt"){
					var newText = ""
            for (i = 0;i<text.length;i++){
                console.log("checking "+text[i]+":");
                for (j = 0;j<alf.length;j++){
                    if (text[i]===alf[j]){
											console.log(alf[j]+": true, setting "+alf[(j+2)%54])
											newText = newText + alf[(j+2)%54]
                    }

                }
            }
            $("#before").val(newText);
        }else{
					var newText = ""
					for (i = 0;i<text.length;i++){
							console.log("checking "+text[i]+":");
							for (j = 0;j<alf.length;j++){
									if (text[i]===alf[j]){
										console.log(alf[j]+": true")
										newText = newText + alf[(j+54-2)%54]
									}

							}
					}
					$("#before").val(newText);
        }
    });
		</script>
    </body>

</html>