0

Estou à fazer um conversor de textos para binários em HTML/CSS/JS, porém me esbarrei em um problema que Ao apertar o botão de decodificar, não muda o texto onde deveria mudar, logo depois não consigo mais codificar nada, assim tendo que reiniciar a página.

Códigos relevantes HTML

<div id="corpoSelecionado">
            Selecione a ferramenta que deseja usar
            <div id="conversorBinario">
                Esta ferramenta, irá converter seus textos em números binários rapidamente, basta digitar o texto abaixo, e clicar no botão<br>
                Você pode utilizar também de forma contrária, lembrando que cada caractere corresponde à oito 0 ou 1, por exemplo, 01000001, que convertido é o 'A'<br>
                <textarea id="texto" placeholder="Digite aqui o texto à ser codificado" rows="5"></textarea><br>
                <button class="botoesConv" id="codificar" onclick="transformTextToBin()">Codificar</button>
                <button class="botoesConv" id="copiar1" onclick="copiar1()">Copiar</button><br>
                <textarea id="texto2" placeholder="Digite aqui o texto à ser decodificado" rows="5"></textarea><br>
                <button class="botoesConv" id="decodificar" onclick="transformBinToText()">Decodificar</button>
                <button class="botoesConv" id="copiar2" onclick="copiar2()">Copiar</button>
            </div>
            <div id="manipuladorTextos">
                Digite abaixo o texto à ser manipulado e escolha algo para mudar nele!<br>
                <textarea id="textoMan" cols="60" rows="7"></textarea><br>
                <div class="botoes">
                    <button class="manBotoes" onclick="transMaiusculas()">1ªs Letras Maiúsculas</button>
                    <button class="manBotoes" onclick="transMinusculas()">1ªs Letras Minúsculas</button>
                    <button class="manBotoes" onclick="aoContrario()">Ao Contrário</button>
                    <button class="manBotoes" onclick="alternado()">MoDo AlTeRnAdO</button>
                    <button class="manBotoes" onclick="cabecaPraBaixo()">Cabeça pra baixo</button>
                </div>
                <div id="textoManipulado"></div>
            </div>
        </div>

JS

let bin = ['00100000', '00100001', '00100010', '00100011', '00100100', '00100101', '00100110', '00100111', '00101000', '00101001', 
        '00101010', '00101011', '00101100', '00101101', '00101110', '00101111', '00110000', '00110001', '00110010', '00110011', 
        '00110100', '00110101', '00110110', '00110111', '00111000', '00111001', '00111010', '00111011', '00111100', '00111101', 
        '00111110', '00111111', '01000000', '01000001', '01000010', '01000011', '01000100', '01000101', '01000110', '01000111',
        '01001000', '01001001', '01001010', '01001011', '01001100', '01001101', '01001110', '01001111', '01010000', '01010001',
        '01010010', '01010011', '01010100', '01010101', '01010110', '01010111', '01011000', '01011001', '01011010', '01011011',
        '01011100', '01011101', '01011110', '01011111', '01100000', '01100001', '01100010', '01100011', '01100100', '01100101',
        '01100110', '01100111', '01101000', '01101001', '01101010', '01101011', '01101100', '01101101', '01101110', '01101111',
        '01110000', '01110001', '01110010', '01110011', '01110100', '01110101', '01110110', '01110111', '01111000', '01111001',
        '01111010', '01111011', '01111100', '01111101', '01111110', '01111111', '10000000', '10000001', '10000010', '10000011',
        '10000100', '10000101', '10000110', '10000111', '10001000', '10001001', '10001010', '10001011', '10001100', '10001101',
        '10001110', '10001111', '10010000', '10010001', '10010010', '10010011', '10010100', '10010101', '10010110', '10010111',
        '10011000', '10011001', '10011010', '10011011', '10011100', '10011101', '10011110', '10011111', '10100000', '10100001',
        '10100010', '10100011', '10100100', '10100101', '10100110', '10100111', '10101000', '10101001', '10101010', '10101011',
        '10101100', '10101101', '10101110', '10101111', '10110000', '10110001', '10110010', '10110011', '10110100', '10110101',
        '10110110', '10110111', '10111000', '10111001', '10111010', '10111011', '10111100', '10111101', '10111110', '10111111',
        '11000000', '11000001', '11000010', '11000011', '11000100', '11000101', '11000110', '11000111', '11001000', '11001001',
        '11001010', '11001011', '11001100', '11001101', '11001110', '11001111', '11010000', '11010001', '11010010', '11010011',
        '11010100', '11010101', '11010110', '11010111', '11011000', '11011001', '11011010', '11011011', '11011100', '11011101',
        '11011110', '11011111', '11100000', '11100001', '11100010', '11100011', '11100100', '11100101', '11100110', '11100111',
        '11101000', '11101001', '11101010', '11101011', '11101100', '11101101', '11101110', '11101111', '11110000', '11110001',
        '11110010', '11110011', '11110100', '11110101', '11110110', '11110111', '11111000', '11111001', '11111010', '11111011',
        '11111100', '11111101', '11111110', '11111111'];
let nmrAscii = [];
for (let contador = 32; contador <= 255; contador++){
    nmrAscii.push(contador);
} function transformTextToBin() {
    textoABin = document.getElementById("texto").value;
    document.getElementById("texto2").innerHTML = ``;
    for (let contador2 = 0; contador2 < textoABin.length; contador2++){
        for (let contador3 = 0; contador3 < nmrAscii.length; contador3++){ 
            let letraAscii = textoABin[contador2].charCodeAt();
            if(letraAscii == nmrAscii[contador3]) {
                document.getElementById("texto2").innerHTML += `${bin[contador3]} `;
            } 
        }
    }
}

function transformBinToText() {
    textoACrip = document.getElementById("texto2").value;
    document.getElementById("texto").innerHTML = ``;
    numeroBin = textoACrip.split(" ");
    numeroBin.pop();
    for(let contador2 = 0; contador2 < numeroBin.length; contador2++) {
        indexOf = bin.indexOf(numeroBin[contador2]);
        letra = String.fromCharCode(indexOf + 32);
        document.getElementById("texto").innerHTML += `${letra}`; 
    }
}

Ao testar no console.log, a decodificação acontece normalmente, porém na hora de colocar ela na página, não funciona

Imagem do conversor

Video demonstrando os problemas

7
  • Antes de mais nada, aconselho você sempre utilizar uma keyword antes da variável. Seja var, const ou let. Se você não declarar isso, todas as suas varáveis se tornam globais e isso pode gerar alguns problemas. E bom... Eu entendi o seu problema, mas está meio confuso de entender exatamente onde pode estar ocorrendo o erro. Após clicar no botão "decodificar" aperte a tecla F12 e vá até o menu "console". Verifique se ocorre algum erro e atualize a sua pergunta com esse erro. Vai ajudar bastante.
    – Jaderson
    24/10/2020 às 20:59
  • Fiz o que pediu, o erro continuou O Erro que tá acontecendo não aparece no console, mas ele está na ligação dos dois botões de codificar e decodificar, pq após fazer uma das duas ações, acontece que o outro fica inútilizavel 27/10/2020 às 20:09
  • Bruno, fiz alguns testes no seu código e bom, é meio difícil p mim te dizer exatamente o que é, pois não sei como transformar um texto em binário. Mas percebi algumas coisas que vou citar aqui e gostaria que você se atentasse. 1- Da onde vem as variáveis nmrAscii e bin? 2- Nessa linha você transforma o texto digitado em um array de string: numeroBin = textoACrip.split(" "); e em seguida, você remove esse valor do array, nessa linha: numeroBin.pop(); isso faz com que a sua função nunca execute o bloco de código dentro do for. Veja esses pontos e me fale se te ajudou de alguma forma.
    – Jaderson
    27/10/2020 às 22:30
  • bin e nmrAsciii são vetores que recebem os números binários e os números de acordo com a tabela ASCII, respectivamentes.Irei testar sem o pop. Mas o problema não está em qual fazer primeiro, se eu codifico A e depois tento decodificar o numero binário correspondente à B, ele não decodifica 28/10/2020 às 11:07
  • Entendi Bruno... Coloque na sua pergunta o código que preenche essas variáveis. Assim eu tb posso testar e simular o erro. Sem elas declaradas eu não consigo avançar no seu código. Mas aparentemente é um problema de lógica e não de sintaxe. Como disse, não entendi o porque você da um .pop() no array. Se você fizer isso em casos que tiver mais de um binário digitado, funcionará, pois o array terá valor. Porém, quando há somente um bin, isso não acontecerá, visto que o pop remove o único valor existente no array. Fazendo com que o length dele seja zero. E com o length zero ele não entra no for.
    – Jaderson
    28/10/2020 às 14:33

1 Resposta 1

1

Bruno, agora consegui testar seu código e a primeira coisa que fiz foi entender melhor o comportamento do innerHTML e do innerText também (apesar do segundo não estar no seu código). Como não dava erro no console, alguma coisa estava acontecendo internamente.

Acontece que, utilizar o "innerHTML +=" para concatenar textos (strings) não é o mais recomendável. Essa propriedade é utilizada para adicionar códigos HTML, assim como o próprio nome sugere. Ele interpreta o HTML passado. Ou seja, você poderia fazer algo dese tipo: innerHTML = '<b>negrito</b>' e a exibição seria um texto em negrito, sem as tags.

Quando você adiciona o "+=" ao innerHTML, você força o recarregamento de componentes e referências que já foram carregadas pelo DOM. Antigamente isso poderia gerar quebra nas referências, mas confesso que não sei te dizer se esse problema continua, visto que os navegadores estão sempre com atualizações para corrigir tais erros e melhorar o funcionamento do Javascript.

Já o innerText não funcionaria no seu caso também porque estaríamos adicionando o valor dentro da tag <textarea></textarea> e não no atributo value do elemento textarea. Entende a diferença?

Seu erro foi importante, me ajudou a entender melhor os conceitos de propriedades e atributos (coisas que uso a alguns anos e nunca fui afundo) e claro... Ajudou você a entender junto comigo também.

Bom, sem mais balela... O ideal é que na function transformTextToBin() você troque isso:

document.getElementById("texto2").innerHTML += `${bin[contador3]} `;

Por isso:

document.getElementById("texto2").value += `${bin[contador3]} `;

E na function transformBinToText() você troque este trecho:

document.getElementById("texto").innerHTML += `${letra}`; 

Por esse:

document.getElementById("texto").value += `${letra}`;

Use sempre o atributo value para tais casos.

2
  • Cara, muito obrigado! Deu certinho, eu havia parado com meu projeto por causa desse erro e não tava achando uma solução! Muito obrigado!!! 3/11/2020 às 16:12
  • Que bom que te ajudei, Bruno! Aprendi bastante tb com o seu erro. Não esqueça de marcar a pergunta como aceita(resolvida), isso vai ajudar outras pessoas que tiverem o mesmo erro que você... Abraço e boa sorte no projeto!
    – Jaderson
    3/11/2020 às 16:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .