Variable feed within variable

Question

In JS I have the following line:

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

But when I run this chunk of code, there is no message Hello inside the DIV, it is empty. But if at the beginning of the code var recebeMensagem = ''; I already feed her with Hello, appears, how to do the way I’m trying?

Because the project is more complex, it would need to be +- as I showed....

Answer 1

I’ll risk an adaptation of the code that may be what you wish. Following the line of Netinho’s reply, I believe I can fix it. If this is it, the credits are from Netinho, because I just adapted his code.

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)

Here you have a vector in Javascript recebeMensagem = [], now just throw the items into the vector and the messages will be stored in different positions.

Following the same logic, you can scan your array and display the results as follows:

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

See on Jsfiddle

I hope it helps, I just tried to fit the logic, I don’t have much experience with Javascript. Hugs!

Answer 2

What you want does not correspond to the concept of "variable". Variable is a memory space that will be reserved to store values by your program/application. What you want can perhaps be achieved by a property (here we are entering the concept of object orientation) or a function.

The javascript language allows creating "inline" functions and for your purpose we can use an approximation of your code as shown below:

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>

Only ratifying, in the above example, each time the function mensagemBot() is used, it will bring the div element with the content equal to that of the variable recebeMensagem on its return. (If the contents of the variable are changed, the return of the function will also be).

Answer 3

You can use a little more ES6 if you want to leave your code more Fancy.

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

Answer 4

You are receiving the value in the variable recebeMensagem and is not using it anywhere. To set the value of the variable in div use the function 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>