Adição de eventos não reconhecida pelo navegador

Programação e Desenvolvimento
1

Boa tarde ! Estou tentando resolver um exercício de lógica de programação com JavaScript e Html só que o código fica dando erro e o algoritmo não opera como esperado, o que eu poderia fazer ?

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="Códigos JavaScript/script2-2.js"></script>
    <title>Exemplo cinema</title>
</head>
<body>
  <h1>Grupo Cine ECMA</h1>
  <form> 
    <p> Digite o nome do filme:
      <input type="text" id="inTitulo" required>  
    </p>
    <p> Digite a duração em minutos:
        <input type="text" id="inDuracao" required>
    </p>
    <input type="submit" value="Converter em horas e minutos">
  </form>
    <h3></h3>
    <h4></h4>

</body>
</html>

let formulario = document.querySelector("form");
let resposta1 = document.querySelector("h3");
let resposta2 = document.querySelector("h4");

formulario.addEventListener("submit",(e) =>{
  let titulo = formulario.inTitulo.value
  let duracao = Number(formulario.inDuracao.value)
  
  let horas = Math.floor(duracao/60)
  let minutos = duracao % 60
  resposta1.innerText = titulo
  resposta2.innerText = (hora+" hora(s) e "+minutos+" minuto(s)")
  e.preventDefault()
})
2

corrigindo no Html não coloque o script na head e sim a baixo do h4.

2024-08-18_18-24
2024-08-18_18-241231×463 68.1 KB

1 curtida
3

Porque ? O que dará de diferença ?

4

Onde você esta aprendendo a programar.

1 curtida
5

É recomendado colocar scripts JavaScript no final da tag body do HTML para melhorar a velocidade de exibição. Isto porque a interpretação do script desacelera a exibição, e quando o navegador chega aos scripts, ele para até finalizar o download e executar, só após isso finaliza 100% do HTML.

Além disso, se quiser fazer alguma ação num botão, por exemplo, esse mesmo botão já deverá ter sido lido pelo navegador.

1 curtida
6

Estou aprendendo com o livro : Lógica de programação e algoritmos com JavaScript.
A abordagem do livro é boa, só que eu sou meio lento e também fiz isso porque eu já vi sites com o script na tag head.

1 curtida
7

Já estudei esse livro ele é bom

1 curtida
8

Realmente. Mas poderia me dizer, porque tem sites que tem o script no head e tudo fica certo ?

10

O <head>elemento. Este elemento atua como um contêiner para tudo o que você deseja incluir na página HTML, que não seja o conteúdo que a página mostrará aos visualizadores. Isso inclui palavras-chave e uma descrição de página que apareceria nos resultados da pesquisa, CSS para estilizar o conteúdo, declarações de conjunto de caracteres e muito mais.

Um lugar bom para estudar HTML, JavaScript e css, larga essa internet podre, estude pelas documentações oficiais:

Aprendendo desenvolvimento web

Ecma

Codecademy

1 curtida
11

Fiz a substituição só que o navegador retorna a resposta por menos de meio segundo, porque isso ocorreu ?

12 
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo cinema</title>
</head>
<body>
  <h1>Grupo Cine ECMA</h1>
  <form> 
    <p> Digite o nome do filme:
      <input type="text" id="inTitulo" required>  
    </p>
    <p> Digite a duração em minutos:
        <input type="number" id="inDuracao" required>
    </p>
    <input type="submit" value="Converter em horas e minutos">
  </form>
    <h3></h3>
    <h4></h4>
    <script src="script.js"></script>
</body>
</html>

const form = document.querySelector("form");
const resposta1 = document.querySelector("h3");
const resposta2 = document.querySelector("h4");

form.addEventListener("submit",(e) =>{
  const titulo = form.inTitulo.value
  const duracao = Number(form.inDuracao.value)
  
  const horas = Math.floor(duracao/60)
  const minutos = duracao % 60
  resposta1.innerText = titulo
  resposta2.innerText = (`${horas} horas e ${minutos} minutos`)
  e.preventDefault()
})

copia ai e vê se retorna true

13

Olá amigo,
Veja se te ajuda como um reforço para estudar.

1 curtida
14

O Guanabara é sensacional!

15

Mas o que deu de errado ? Hahaha