Problem with script for BMI calculation

Asked

Viewed 44 times

-1

    function CalculoImc(){
        var peso = window.document.getElementById('campopeso')
        var cen = window.document.getElementById('campocen')
        var altura = window.document.getElementById('campoaltura')
        var tamanho = (altura*100 + cen)/100
        var imc = peso / (tamanho * tamanho)
        var nome = window.document.getElementById('camponome')
        var res = window.document.getElementById('res')
        var foto = window.document.getElementById('foto')

        

        if (imc < 18) {
            res.innerHTML = `Prazer ${nome} e você está com desnutrido`
            document.body.style.background = '#8a8e0b'
            foto.src = 'img/comida.jpg'
        } else if (imc > 18 && imc < 25) {
            res.innerHTML = `Prazer ${nome} e você está com o peso normal`
            document.body.style.background = '#0aad05'
            foto.src = 'img/exercicio.jpg'
        } else if (imc > 25 && imc < 30) {
            res.innerHTML = `Prazer ${nome} e você está acima do peso`
            document.body.style.background = '#d67e0a'
            foto.scr = 'img/saudavel.jpg'
        } else {
            res.innerHTML = `Prazer ${nome} e você está com obesidade`
            document.body.style.background = '#c60101'
            foto.src = 'img/obeso.jpg'
        }

}
        body{
            background: rgb(7, 65, 99);
        }
        header{
            color: white;
            text-align: center;
            -webkit-text-stroke-width: 0.5px;
            -webkit-text-stroke-color: #000;
            font-size: 1.5em; 
        }
        section{
            background: white;
            text-align: center;
            border-radius: 15px;
            padding: 15px;
            width: 700px;
            height: 490px;
            margin: auto;
            box-shadow: 5px 5px 10px black;
        }
        section #peso{
            
            text-align: left;
            display: block;
            margin: 25px auto;
        }
        section #altura{
            
            text-align: left;
            display: block;
            margin: 25px auto;
        }
        section #nome{
            text-align: right;
            display: block;
            margin: 25px auto;
        }
        section #centimetros{
            position: absolute;
            right: 580px;
            top: 100px;
        }
        section #nome{
            position: absolute;
            right: 580px;
            top: 130px;
        }
        section #campocen{
            position: absolute;
            right: 400px;
            top: 90px;
        }
        section #camponome{
            position: absolute;
            right: 400px;
            top: 130px; 
        }
        section #campopeso{
            position: absolute;
            left: 460px;
            top: 90px;
        }
        section #campoaltura{
            position: absolute;
            left: 460px;
            top: 130px;
        }
        input{
            display: block;
            margin: 25px auto;
            border-radius: 15px;
        }
        footer{
            color: white;
            text-align: center;
        }
<header id="header" class="">
    <p>Calcule o seu imc</p>    
</header>

<section id="formulario">
    <div id="peso">
        Digite o seu peso :
        <input id="campopeso" type="number" name="peso">
    </div>
    <div id="altura">
        Digite a sua altura:
        <input id="campoaltura" type="number" name="altura">
    </div>  
    <div>
        <p  id="centimetros">Digite os seus cent.:</p>
        <input id="campocen" type="number" name="centi">
    </div> 
    <div>
        <p id="nome">Digite seu nome:</p>
        <input id="camponome" type="text" name="nome">
    </div> 
    <div>
        <input type="button" value="Calcular" class="btn_calcular" size="5" onclick="CalculoImc();">   
    </div>
    <div id="res">
        Resultado.    
    </div> 
    <div id="imagem">
        <img src="img\exercicio.jpg" id="foto" alt="foto">
    </div>
</section>

<footer>
    <p>&copy; SamuelMoreira3</p>
</footer>

javascript
  • 1

    Hello samuelCode3, welcome to Stack Overflow! A tip to improve your site experience: Always try to describe the problem you’re having; for example, the exception you’re getting or the one that isn’t working as it should. Also try to use the tags in your favor; it’s always good to mark the problem with at least the language tag in question (e.g., Javascript). If you are in doubt about a particular tag click on it to get a description and related questions.

1 answer

1

Apparently you’re not getting the values (.value) fields when the function CalculoImc() is being called.

For example just add .value its reference to some of its fields as:

var peso = document.getElementById('campopeso').value

When the function CalculoImc() call will return the value filled in the field or if there are no values String() "empty"

function CalculoImc(){
        var peso = document.getElementById('campopeso').value
        var cen = document.getElementById('campocen').value
        var altura = document.getElementById('campoaltura').value
        var tamanho = (altura*100 + cen)/100
        var imc = peso / (tamanho * tamanho)
        var nome = document.getElementById('camponome').value
        var res = document.getElementById('res')
        var foto = document.getElementById('foto')

        if (imc < 18) {
            res.innerHTML = `Prazer ${nome} e você está com desnutrido`
            document.body.style.background = '#8a8e0b'
            foto.src = 'img/comida.jpg'
        } else if (imc > 18 && imc < 25) {
            res.innerHTML = `Prazer ${nome} e você está com o peso normal`
            document.body.style.background = '#0aad05'
            foto.src = 'img/exercicio.jpg'
        } else if (imc > 25 && imc < 30) {
            res.innerHTML = `Prazer ${nome} e você está acima do peso`
            document.body.style.background = '#d67e0a'
            foto.scr = 'img/saudavel.jpg'
        } else {
            res.innerHTML = `Prazer ${nome} e você está com obesidade`
            document.body.style.background = '#c60101'
            foto.src = 'img/obeso.jpg'
        }

}
body{
            background: rgb(7, 65, 99);
        }
        header{
            color: white;
            text-align: center;
            -webkit-text-stroke-width: 0.5px;
            -webkit-text-stroke-color: #000;
            font-size: 1.5em; 
        }
        section{
            background: white;
            text-align: center;
            border-radius: 15px;
            padding: 15px;
            width: 700px;
            height: 490px;
            margin: auto;
            box-shadow: 5px 5px 10px black;
        }
        section #peso{
            
            text-align: left;
            display: block;
            margin: 25px auto;
        }
        section #altura{
            
            text-align: left;
            display: block;
            margin: 25px auto;
        }
        section #nome{
            text-align: right;
            display: block;
            margin: 25px auto;
        }
        section #centimetros{
            position: absolute;
            right: 580px;
            top: 100px;
        }
        section #nome{
            position: absolute;
            right: 580px;
            top: 130px;
        }
        section #campocen{
            position: absolute;
            right: 400px;
            top: 90px;
        }
        section #camponome{
            position: absolute;
            right: 400px;
            top: 130px; 
        }
        section #campopeso{
            position: absolute;
            left: 460px;
            top: 90px;
        }
        section #campoaltura{
            position: absolute;
            left: 460px;
            top: 130px;
        }
        input{
            display: block;
            margin: 25px auto;
            border-radius: 15px;
        }
        footer{
            color: white;
            text-align: center;
        }
<header id="header" class="">
    <p>Calcule o seu imc</p>    
</header>

<section id="formulario">
    <div id="peso">
        Digite o seu peso :
        <input id="campopeso" type="number" name="peso">
    </div>
    <div id="altura">
        Digite a sua altura:
        <input id="campoaltura" type="number" name="altura">
    </div>  
    <div>
        <p  id="centimetros">Digite os seus cent.:</p>
        <input id="campocen" type="number" name="centi">
    </div> 
    <div>
        <p id="nome">Digite seu nome:</p>
        <input id="camponome" type="text" name="nome">
    </div> 
    <div>
        <input type="button" value="Calcular" class="btn_calcular" size="5" onclick="CalculoImc();">   
    </div>
    <div id="res">
        Resultado.    
    </div> 
    <div id="imagem">
        <img src="img\exercicio.jpg" id="foto" alt="foto">
    </div>
</section>

<footer>
    <p>&copy; SamuelMoreira3</p>
</footer>

  • thank you very much buddy, your comment was of great use.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.