3

Em JS tenho a seguinte linha:

var recebeMensagem = '';
var mensagemBot = '<div class="bot_mensagens">'+recebeMensagem+'</div>';
// 1ª mensagem
recebeMensagem = 'Olá';
$('.recebe_as_mensagens').append(mensagemBot);

Mas quando rodo esse trecho do código, não aparece a mensagem Olá dentro da DIV, ela vem vazia. Mas se no começo do código var recebeMensagem = ''; eu já alimentar ela com Olá, aparece, como fazer da forma que estou tentando?

Pois o projeto é mais complexo, precisaria ser +- como mostrei....

1
  • Você recebe essas mensagens como?
    – sant0will
    Commented 8/10/2018 às 20:09

4 Respostas 4

3

O que você quer não corresponde ao conceito de "variável". Variável é um espaço de memória que será reservado para guardar valores pelo seu programa/aplicação. O que você quer talvez possa ser atingido por uma propriedade (ai estamos entrando no conceito de orientação à objeto) ou uma função.

A linguagem do javascript permite que sejam criadas funções "inline" e para o seu propósito podemos usar uma aproximação do seu código como exibido abaixo:

var recebeMensagem = '';
var mensagemBot = function() {
    return '<div class="bot_mensagens">' + recebeMensagem + '</div>';
};
var conteudoHtml = '';
conteudoHtml = $('.recebe_as_mensagens').html();
recebeMensagem = 'Olá';
conteudoHtml += mensagemBot();
$('.recebe_as_mensagens').html(conteudoHtml);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="recebe_as_mensagens"></div>

Só ratificando, no exemplo acima, cada vez que a função mensagemBot() for utilizada, ela vai trazer o elemento div com o conteúdo igual a ao da variavel recebeMensagem no seu retorno. (Se o conteúdo da variável for alterado, o retorno da função também o será).

3

Vou arriscar uma adaptação do código que pode ser o que você deseja. Seguindo a linha da resposta do Netinho, acredito que possa resolver. Se for isto, os créditos são do Netinho, pois apenas adaptei seu código.

var recebeMensagem = []

var mensagemBot = '<div class="bot_mensagens">' + recebeMensagem + '</div>';
var conteudoHtml = '';
conteudoHtml = $('.recebe_as_mensagens').html();

recebeMensagem += 'Olá';
recebeMensagem += 'Tudo bem?';
recebeMensagem += 'Tchau';

conteudoHtml += mensagemBot;
$('.recebe_as_mensagens').html(conteudoHtml);
$(".bot_mensagens").text(recebeMensagem)

Aqui você tem um vetor em Javascript recebeMensagem = [], agora basta ir jogando os itens para dentro do vetor e as mensagens serão armazenadas em posições diferentes.

Seguindo a mesma lógica, é possível varrer seu array e mostrar os resultados da seguinte forma:

for(var i = 0; i < recebeMensagem.length; i++){
  conteudoHtml = mensagemBot;
  $('.recebe_as_mensagens').html(conteudoHtml);
  $(".bot_mensagens").text(recebeMensagem)
}

Veja no JsFiddle

Espero que ajude, apenas tentei adequar a lógica, não tenho muita experiência com Javascript. Abraços!

3

Você pode usar um pouco mais do ES6 se quiser deixar seu código mais fancy.

const outputMessage = message => `<div class="bot_mensagens">${message || 'Olá'}</div>`;
$('.recebe_as_mensagens').append(outputMessage());
$('.recebe_as_mensagens').append(outputMessage('Tc de onde?'));
2

Você está recebendo o valor na variável recebeMensagem e não está a usando em nenhum lugar. Para setar o valor da variável na div use a função text()

var recebeMensagem = '';
var mensagemBot = '<div class="bot_mensagens">' + recebeMensagem + '</div>';
var conteudoHtml = '';
conteudoHtml = $('.recebe_as_mensagens').html();
recebeMensagem = 'Olá';
conteudoHtml += mensagemBot;
$('.recebe_as_mensagens').html(conteudoHtml);
$(".bot_mensagens").text(recebeMensagem)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="recebe_as_mensagens"></div>

2
  • 1
    Obrigado, mas desse jeito eu sei que é possível, o problema é que não posso fazer assim. A variável recebeMensagem ta lá, dentro da mensagemBot, eu teria que atualizar a mensagemBot, sem precisar reescrver ela Commented 8/10/2018 às 20:22
  • Pelo que entendi a solução proposta pelo Netinho não ajuda pois você está falando que ao alterar o valor de recebeMensagem todas as mensagens já enviadas seriam reescritas para o último valor enviado, certo? Uma dúvida, você já pensou em utilizar um vetor (array)? Pode resolver seu problema. Commented 8/10/2018 às 20:49

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .