Button problems, codifying/decoding texts for binary numbers

Asked

Viewed 50 times

0

I’m making a text to binary converter in HTML/CSS/JS, but I ran into a problem that By pressing the decode button, it does not change the text where it should change, soon after I can no longer encode anything, so I have to restart the page.

Relevant codes 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}`; 
    }
}

When testing on the.log console, decoding usually happens, but when putting it on the page, it doesn’t work

Image of the converter

Video demonstrating the problems

javascript html css string

  • First of all, I advise you to always use a keyword before the variable. Whether var, const or Let. If you don’t declare it, all your variables become global and it can create some problems. And good... I understand your problem, but you’re a little confused to understand exactly where the error might be taking place. After clicking the "decode" button press the F12 key and go to the "console" menu. Check if an error occurs and update your question with this error. It will help a lot.

  • I did what you asked, the error continued

  • Bruno, I did some tests on your code and, well, it’s kind of hard for me to tell you exactly what it is, because I don’t know how to turn a text into binary. But I noticed some things I will mention here and I would like you to take a look. 1- Where do the variables nmrAscii and bin come from? 2- In this line you transform the typed text into a string array: numeroBin = textACrip.split(" "); and then you remove this value from the array, in this line: numeroBin.pop(); this makes your function never run the code block inside the for. Look at these dots and tell me if it helped you in any way.

  • bin and nmrAsciii are vectors that receive binary numbers and numbers according to the ASCII table, respectively. I will test without pop. But the problem is not which to do first, if I encode A and then try to decode the binary number corresponding to B, it does not decode

  • I understand Bruno... Put in your question the code that fills these variables. So I can also test and simulate the error. Without them declared I can’t advance your code. But apparently it’s a problem of logic and not syntax. As I said, I don’t understand why you give a . pop() in the array. If you do this in cases where you have more than one binary typed, it will work because the array will have value. However, when there is only one bin, this will not happen, as the pop removes the only existing value in the array. Making his length zero. And with length zero he doesn’t enter for.

  • The idea is not necessarily to remove pop(). It is to understand its function in the code. I believe that your array should be composed by each of the binaries typed. If so, you will have to think of a way to fit two cases: 1- When the user type only a sequence of binaries. 2- When user type more than one binary sequence.

  • I put the requested variables, I will test another logic, the pop I was using because when it encodes it gets a space after 8 numbers

Show 2 more comments

1 answer

1


Bruno, now I was able to test your code and the first thing I did was to better understand the behavior of innerHTML and innerText as well (although the second is not in your code). As there was no error in the console, something was happening internally.

It turns out, using "innerHTML +=" to concatenate texts (strings) is not the most recommended. This property is used to add HTML code, just as its name suggests. It interprets the past HTML. I mean, you could do something like: innerHTML = '<b>negrito</b>' and the display would be a bold text, without the tags.

When you add "+=" to innerHTML, you force the reload of components and references that have already been loaded by the DOM. In the past this could generate break in references, but I confess that I can’t tell you if this problem continues, since browsers are always with updates to correct such errors and improve the functioning of Javascript.

innerText wouldn’t work in your case either because we’d be adding the value inside the tag <textarea></textarea> and not in the value attribute of the textarea element. Understand the difference?

Your mistake was important, it helped me to better understand the concepts of properties and attributes (things I use a few years ago and I’ve never been sunk) and of course... Helped you understand along with me too.

Well, no more bullshit... The ideal is that in Function transformTextToBin() you change this:

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

That’s why:

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

And in the Function transformBinToText() you change this excerpt:

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

For that:

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

Always use the attribute value for such cases.

  • Man, thank you so much! It was right, I had stopped with my project because of this error and I was not finding a solution! Thank you very much!!!

  • I’m glad I helped you, Bruno! I learned a lot from your mistake. Don’t forget to mark the question as accepted(solved), this will help other people who have the same mistake as you... Hug and good luck on the project!

Browser other questions tagged javascript html css string

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