Doubt in Cifra de César Javascript

Question

Doubt in Cifra de César Javascript

Asked 6 years, 5 months ago

Viewed 2,282 times

0

Hello, I’m new to Javascript and had a problem with this code:

<!DOCTYPE html>
<html>
    <head>
        <title>Caesar Cipher</title>
        <meta charset="UTF-8">
        <style>
            button {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background-color: orange;
                border-color: lightsalmon;
            }
            #big {
                width: 100px;
            }
        </style>
    </head>
    <body>
        <span id="label">Key: </span>
        <button onclick="prev()">-</button>
        <span id="key">1</span>
        <button onclick="next()">+</button><br/><br/>
        <input type="text" id="input"/>
        <button onclick="calculate()" id="big">Calculate</button>
        <span id="output"></span>
        <script>
            var values = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z");
            var key = document.getElementById("key").innerHTML;
            function prev() {
                if(key > 1) {
                    key--;
                    document.getElementById("key").innerHTML = key;
                }
            }
            function next() {
                if(key < 25) {
                    key++;
                    document.getElementById("key").innerHTML = key;
                }
            }
            function calculate() {
                var input = document.getElementById("input").value;
                var a = 0;
                while(a < input.lenght) {
                    if(a + key < 26) {
                        c = a + key;
                    } else {
                        c = a + key - 26;
                    }
                    var b = 0;
                    while(b < input.length) {
                        input = input.replace(values[a], values[c]);
                        b++;
                    }
                    a++;
                }
                document.getElementById("output").innerHTML = input;
            }
        </script>
    </body>
</html>

Putting abc in input it returns abc instead of Bcd. Can anyone help me?

What is the code for? What should the code do?

– epx

2018/05/06 at 16:55
epx encrypt in Caesar cipher.

– nbbbvfd

2018/05/06 at 17:11
why these checks inside the first loop? they create a variable c but it is not used

– Costamilam

2018/05/06 at 17:37
1

I made a code that may help you: https://codepen.io/valdeir2000/pen/YLrgra?editors=1011

– Valdeir Psr

2018/05/06 at 17:58
@Valdeirpsr Why not put this alternative solution as an answer ? It seems to me a relevant content to the question and is all documented.

– Isac

2018/05/06 at 21:42

1 answer

Browser other questions tagged javascript replace

You are not signed in. Login or sign up in order to post.

by Lucas Heim • 14 points · Answer 1 · 2018-05-06T17:51:09+00:00

There’s a lot of things wrong with the code. I think you should review well, because we have variables that are not declared (c) and you never really look at the letters of your input. You’re using the variable a to scroll, but it is only the iterator, it does not have the "value" of the input letter. Anyway, I made a code below that is functional, any doubt I can help you.

<!DOCTYPE html>
<html>
    <head>
        <title>Caesar Cipher</title>
        <meta charset="UTF-8">
        <style>
            button {
                width: 50px;
                height: 50px;
                border-radius: 25px;
                background-color: orange;
                border-color: lightsalmon;
            }
            #big {
                width: 100px;
            }
        </style>
    </head>
    <body>
        <span id="label">Key: </span>
        <button onclick="prev()">-</button>
        <span id="key">1</span>
        <button onclick="next()">+</button><br/><br/>
        <input type="text" id="input"/>
        <button onclick="calculate()" id="big">Calculate</button>
        <span id="output"></span>
        <script>
            var values = new Array("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z");
            var key = +document.getElementById("key").innerHTML;

            function prev() {
                if(key > 1) {
                    key--;
                    document.getElementById("key").innerHTML = key;
                }
            }

            function next() {
                if(key < 25) {
                    key++;
                    document.getElementById("key").innerHTML = key;
                }
            }

            function calculate() {
                var input = document.getElementById("input").value.toUpperCase();
                var result = "";

                for(var i = 0; i<input.length; i++){ //Passa por cada caracter do input

                    var posicaoDaLetraNoAlfabeto = input.charCodeAt(i)-64; //Identifica qual letra é do alfabeto
                    var letraComDeslocamento = (posicaoDaLetraNoAlfabeto + key) % 26; //Faz o deslocamento de César e mantém dentro do alfabeto (26 letras)
                    letraComDeslocamento = letraComDeslocamento == 0 ? 26 : letraComDeslocamento; //MOD retornar 0 caso o resultado seja 26, tem que tratar isso
                    result += values[letraComDeslocamento-1]; //Faz -1 porque a letra 1 (A) está no índice 0 do teu array.
                }

                document.getElementById("output").innerHTML = result;
            }
        </script>
    </body>
</html>