Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Estou resolvendo alguns exercicios de javascript e me da o erro Uncaught TypeError: Cannot read properties of null (reading 'value') (Nao sei separar os codgios html e js)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>
        Video Locadora JS
    </h1>

    <p>
        Titulo do filme:
        <input type="text" id="inFilme">
    </p>
    <p>
        Duração do filme(min)
        <input type="text" id="inTempo">
    </p>

    <p>
        <input type="button" value="Converter para horas" id="conversao">
    </p>

    <p id="outFilme"></p>

    <p id="outTempo"></p>

    <script src="js/locadora.js">
    </script>

</body>
</html>

function calculatempo(){
    var tempo = document.getElementById("intTempo").value;
    var filme = document.getElementById("intFilme").value;

    document.getElementById("outFilme").textContent = filme
    document.getElementById("outTempo").textContent = tempo

}

var conversao = document.getElementById("conversao");

conversao.addEventListener("click", calculatempo)
3 respostas

Vittor, na função calculatempo, você está tentando buscar o elemento com os id's intTempo e intFilme (com a letra 't'), mas no código html, os ids estão escritos como inTempo e inFilme, por isso que não está conseguindo buscar o seus values. Tenta verificar se esse é o problema.

Não, ainda nao deu, refiz todo o codigo e msm assim ainda da problema, o inFilme/outFilme funciona certinho, quando escrevo no input ele aparece mas quando faço a mesma coisa com o inDuracao/outDuracao ele diz Uncaught TypeError: Cannot set properties of null (setting 'textContent') e quando nao da esse, da o erro do value.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <h1>Video Locadora JS</h1>

    <p>Titulo do filme:
        <input type="text" id="inFilme">
    </p>

    <p>Tempo de duração (min)
        <input type="text" id="inDuracao">
    </p>

    <p>
        <input type="button" value="Conversao minutos para hora" id="botao" >
    </p>

    <p id="outFilme"> </p>

    <p id="outDuracao"> </p>

    <script src="js/locadora.js"></script>

</body>
</html>

Codigo js

//var inDuracao = document.getElementById("inDuracao").value;

function converteDuracao(){
    var inFilme = document.getElementById("inFilme").value;
    var inDuracao = document.getElementById("inDuracao").value;

    document.getElementById("outFilme").textContent = inFilme
    document.getElementById("outSaida").textContent = inDuracao
}




var conversao = document.getElementById("botao");

botao.addEventListener("click", converteDuracao)
solução!

Dessa vez, aqui atribuiu o id como sendo "outDuracao"

<p id="outDuracao"> </p>

Já aqui, está tentando buscar o elemento com o id "outSaida", que não existe no código HTML que citou

document.getElementById("outSaida").textContent = inDuracao

Tenta só alterar esse outSaida para outDuracao.