How to fire a message every click in jquery?

Asked

Viewed 278 times

2

I have a`form`to calculate the IMC index, and every click on a button displays a div message with the result of the calculation, but I want the message to be displayed a only time per click. This image shows my current code:

inserir a descrição da imagem aqui

Follow the onclick Event Script to display the div message on the screen:

$(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>');
        }
    });
});
jquery html
  • 1

    Forehead $('#mensagem').append for $('#mensagem').html, thus overlapping the contents of the div #mensagem. That’s what you were looking for?

  • what do you mean by message? An alert message (pop up)? A message in the div inside the page?

  • @Sergio was just that, I forgot that the append he would add lines to every click, the html really overlaps, solved my problem. Thank you!

  • 1

    @Ivanfloripa I saw that you have already accepted an answer. I put a new answer in it with a suggestion to improve the code.

3 answers

2


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

  • Rafael solved the problem Thank you!

1

Use like this:

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

1

As I mentioned the .append() adds content to what already exists. You must use .html() that replaces the contents. Having said that I think you could do it this way, more organized and easy 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
    });
});

Browser other questions tagged jquery html

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