2
respostas

Uncaught TypeError: Cannot read properties of null (reading 'value')

estou fazendo uma pagina simples onde o usuario digita um dado e o resultado aparece no paragrafo mas eu nao estou conseguindo exibir o resultado, pelo erro tem haver com o atributo value, o que pode ser?

<!DOCTYPE html>
<html>
<head>
    <title>Estudando</title>
    <meta charset="utf-8">

</head>
<body>
    <h1>estudando</h1>

<input type = "text" id=" campTxt1" >

    <button id = "btn1">clique me</button>

    <p id=" mostraTexto"></p>

    </h1>
    <script src="outro_teste.js"></script>
</body>
</html>

meu script que esta em um arquivo separado:

<script>
const txt1 = document.getElementById('campTxt1')
const botao = document.getElementById('btn1');
const exibeTexto = document.getElementById('mostraTexto');

function passaTexto(){
    exibeTexto.innerHTML = txt1.value

    }

    botao.addEventListener('click',passaTexto)
</script>
2 respostas

Boa tarde Marco, tudo tranquilo ?

Fiz uns testes aqui com o seu código e acredito que o problema seja apenas nos espaços que você deixou ao colocar o nome das classe. Dei uma organizada nele e ficou assim:

HTML:

<h1>estudando</h1>

<input type="text" id="campTxt1">

<button id="btn1">clique me</button>

<p id="mostraTexto"></p>

JavaScript:

const txt1 = document.getElementById("campTxt1");
const botao = document.getElementById("btn1");
const exibeTexto = document.getElementById("mostraTexto");

function passaTexto() {
  exibeTexto.innerHTML = txt1.value;
}

botao.addEventListener("click", passaTexto);

Obs.: Encontrei um fechamento do h1 no final do código, notei que ele não tinha nenhum utilidade então removi.

Espero ter ajudado.

Continue assim, bons estudos !

VLW thiago!!! as alteraçoes que vc fez de espaçamento realmente resolveram hahaha, vou ficar mais ligado daqui pra frente

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software