Javascript Documento de html não exibe saída de dados

Samuel Fortes Brasil · 21 de agosto de 2024

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurante</title>
</head>
<body>
    <h1>RESTAURANTE ECMA</h1>
    <P><strong>Bem-Vindo! Hoje o Buffet está 28.90 Reais</strong></P>
    <form >
        <p>Digite o preço do Buffet:
            <input type="text" id="Inpreco" required>
        </p>
        <p>Quantia cosumida:
            <input type="text" id="Inconsumo">
        </p>
        <input type="submit" value="Calcular Conta">
    </form>
    <h3></h3>
    <script src="Códigos JavaScript/script2-4.js"></script>
</body>
</html>

let form = document.querySelector("form")
let resposta = document.querySelector("h3")


form.addEventListener( "submit" ,(e) =>{
    let ValorBuffet = Number(form.Inpreco.value) // aqui está em kg
    let ValorConsumo = Number(form.Inconsumo.value) //aqui está em gramas
    //necessário uma conversão de Kg para g!!!!!!
    let conta = (ValorBuffet/1000) * ValorConsumo // converteu e fez a conta
    console.log(conta)
     
    h3.innerText = `O preço total é de: R$${conta.toFixed(2)}`
    e.preventDefault()
})

Boa tarde! Gostaria de uma ajuda, estou tentando fazer exercícios de lógica com JS só que nesse aqui estou tendo problemas para fazer ele retornar saída de dados. Alguém poderia apontar o que eu fiz de errado nesse código ? Só quero uma ajuda nisso porque as vezes o que eu não vi, você verá.

Ominicron · 21 de agosto de 2024

@Samuel Fortes BrasilEm -->>

h3.innerText = `O preço total é de: R$${conta.toFixed(2)}`

O nome da sua variável que está com o elemento h3 é 'resposta', tenta usar o código assim -->>

 resposta.innerText = `O preço total é de: R$${conta.toFixed(2)}`

DiF · 26 de agosto de 2024

@Slakzor E ainda assim está errado, porque a variável da resposta está fora da função.

form.addEventListener( "submit" ,(e) =>{
		let resposta = document.querySelector("h3")
    let ValorBuffet = Number(form.Inpreco.value) // aqui está em kg
    let ValorConsumo = Number(form.Inconsumo.value) //aqui está em gramas
    //necessário uma conversão de Kg para g!!!!!!
    let conta = (ValorBuffet/1000) * ValorConsumo // converteu e fez a conta
    console.log(conta)
     
    resposta.innerText = `O preço total é de: R$${conta.toFixed(2)}`
    e.preventDefault()
})

Basta colocar o let resposta dentro da função, e atribuir a resposta no innerText.

Exemplo online: https://jsfiddle.net/dife/u2p4g1k6/