Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

[Dúvida] Uncaught TypeError: Cannot read properties of null

Estou fazendo o projeto de criptografar e descriptografar um texto mais me deparei com o seguinte erro.

Script.js:5 Uncaught TypeError: Cannot read properties of null (reading 'value') at criptografar (Script.js:5:27) at HTMLButtonElement.onclick (index.html:37:74)

function criptografar() {
var texto = textInput.value;
da um erro no value.

<!DOCTYPE html>
<main class="mainContainer">
    <header class="cabecalho">
        <img src="/Desafio-codificador/img/Vector.svg" alt="Logo">
        <h1>Mensagens Codificadas</h1>
    </header>

    <div class="containerInput">

        <div class="input">
            <textarea id="inputTexto" placeholder="Digite seu texto..."></textarea>
            <p>ATENÇÃO: Apenas letras maiúsculas e sem acento</p>
        </div>

        <div id="output">
            <img src="/Desafio-codificador/img/Vector.svg" alt="Logo" height="330px" width="400px">
            <h2>Sua mensagem aparecera aqui</h2>
            <span>Digite um texto que deseja criptografar ou descriptografar.</span>
        </div>

    </div>

    <div class="botoes">
        <div class="containerBtn">
            <button onclick="criptografar()" class="btnCriptografar">Criptografar</button>
            <button onclick="descriptografar()" class="btnDescriptografar">Descriptografar</button>
        </div>
    </div>
</main>

<footer class="rodape">
    <div class="icons">
        <a href="">
            <ion-icon name="logo-youtube"></ion-icon>
        </a>
        <a href="">
            <ion-icon name="logo-instagram"></ion-icon>
        </a>
        <a href="">
            <ion-icon name="logo-github"></ion-icon>
        </a>

    </div>
    <h3>Desenvolvido por Anderson Sydom</h3>
</footer>
<script src="/Desafio-codificador/JS/Script.js"></script>
<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>
var textInput = document.querySelector("inputTexto");

var outInput = document.querySelector("output");

function criptografar() { var texto = textInput.value;

var resultCripto = texto.replace(/e/g, "enter").replace(/i/g, "imes").replace(/a/g, "ai").replace(/o/g, "ober").replace(/u/g, "iufat");

document.getElementById('output').innerHTML = '<textarea readonly id ="inputTexto">' + resultCripto + '</textarea>' + '<button class="ntn-copiar" id="copiar" onclick="copiar()">Copiar</button>'

}

function descriptografar() { var texto = outInput.value;

var resultDescripto = texto.replace(/enter/g, "e").replace(/imes/g, "i").replace(/ai/g, "a").replace(/ober/g, "o").replace(/iufat/g, "u");

document.getElementById('output').innerHTML = '<textarea readonly id ="inputTexto">' + resultDescripto + '</textarea>' + '<button class="btn-copiar" id="copiar" onclick="copiar()">Copiar</button>'

}

function copiar() { var textoCop = document.getElementById('inputTexto');

textoCop.select();
document.execCommand('copy');
alert("Texto copiado com sucesso");

}

1 resposta
solução!

var textInput = document.querySelector("#inputTexto"); var outInput = document.querySelector("#output");

consegui resolver.