César Cipher Doubt JavaScript

Question

César Cipher Doubt JavaScript

Navigation

#1 by (0 votes)

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>

By typing abc in the input it returns abc instead of bcd. Can anyone help me?

javascript replace

asked by anonymous 06.05.2018 / 18:41

1 answer

Carousel Bootstrap - Button covers the entire slide React Native EXPO

score 0 · Accepted Answer

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

<!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>