How to fire a message with every click in jquery?

Navigation
2

I have a 'form' to calculate the IMC index, with each click on a button displaying a message div with the result of the calculation, however I want the message to be displayed a once per click . This image shows my current code:

Followtheonclickeventscripttodisplaythedivmessageonthescreen:

$(document).ready(function(){$("#botao").click(function(){

        var altura = parseFloat($("#altura").val());
        var peso = $("#peso").val();
        var quadrado = (altura * altura);
        var calculo = (peso /quadrado);
        var imc = (calculo *10000).toFixed(2);
        if(imc<=18.5){
            $('#mensagem').append('<b>Seu IMC é de <b>'+imc+' Abaixo do Peso</b></p>');
        }
        else if (imc>18.50 && imc<=24.99){
            $('#mensagem').append('<b>Seu IMC é de <b>'+imc+' Saudável, entre 18,6 e 24,9</b></p>');
        }else if (imc>24.90 && imc<=29.99){
            $('#mensagem').append('<b>Seu IMC é de <b>'+imc+' Você está com sobrepeso</b></p>');
        }else if (imc>29.99 && imc<=34.99 ){
            $('#mensagem').append('<b>Seu IMC é de <b>'+imc+' Obesidade Grau I</b></p>');
        }else if (imc>34.99 && imc<=39.99 ){
            $('#mensagem').append('<b>Seu IMC é de <b>'+imc+' Obesidade Grau II (severa)</b></p>');
        }else if (imc>39.99 ){
            $('#mensagem').append('<b>Seu IMC é de <b>'+imc+'Obesidade Grau III (mórbida), entre acima de 40</b></p>');
        }
    });
});
    
asked by anonymous 24.04.2016 / 16:09

3 answers

2

Change all functions append to html . And make sure to reset the div #message with $("#mensagem").html("");

    
24.04.2016 / 16:21
1

Use this: 

$('#mensagem').html('<b>Seu IMC é de <b>'+imc+' Obesidade Grau II (severa)</b></p>');
    
24.04.2016 / 16:26
1

As I mentioned, .append() adds content to what already exists. You must use .html() that replaces the content. Having said that I think you could do it this way, more organized and easier to maintain: 

$(document).ready(function() {
    var mensagens = { // lógica das mensagens
        '18.5': 'Abaixo do Peso',
        '24.99': 'Saudável, entre 18,6 e 24,9',
        '29.99': 'Você está com sobrepeso',
        '34.99': 'Obesidade Grau I',
        '39.99': 'Obesidade Grau II (severa)',
        '1000': 'Obesidade Grau III (mórbida)',
    };
    var imcs = Object.keys(mensagens).map(Number); // para ter escalões com numeros

    $("#botao").click(function() {

        var altura = parseFloat($("#altura").val());
        var peso = parseFloat($("#peso").val());
        var calculo = peso / (altura * altura);
        var imc = (calculo * 10000).toFixed(2);
        var escala = imcs[0];
        for (var i = 0; i < imcs.length; i++) {
            if (imc > imcs[i]) break; // caso tenha ultrapassado ele usa o ultimo valor registado no loop 
            escala = imcs[i] + '';
        }
        var texto = ['<b>Seu IMC é de <b>', imc, '.'].join(''); // texto
        var nota = ['Escalão: ', mensagens[escala]].join(''); // nota
        $("#mensagem").html([texto, nota].join('<br />')); // inserir no DOM
    });
});
    
24.04.2016 / 17:02
Eval () PHP, usability and context What is the difference between normal and optimum dump-autoload in Composer?