Put multiple variables in an Alert()

Asked

Viewed 1,785 times

2

I need to do a "formatted" Alert, something like:

Price: variable X.

Product name: variable Y

Description: variable Z

But I can’t find in any documentation how to do such "formatting", I tried it as follows:

buttonBuy.addEventListener("click", () => {
    alert("Comprar:" + name, "Preço" + preco,"Quantidade de Unidades" + quantidadeunidades.value,"Quantidade de Caixas" + quantidadecaixas.value);
  });
javascript

  • Wasn’t it very clear what you really want? How so formatted?

  • For example, appear the word Name, and dps of it the variable X, ai in the other row the word Price, and the variable Y.

  • Ah! You want to concatenate strings.

  • I believe that what it in case is to format a string.

  • If so please update the question. have a well formulated question helps other people who have the same problem.

3 answers

1

If that’s what I understand, you want to concatenate strings.

In javascript, there are several ways to do this, for example, the traditional way is to use the symbol +. Using your reasoning, try:

let buttonBuy = document.getElementById("myButton");

var quantidadeunidades = {
value:1
}

var quantidadecaixas = {
value:1
}

buttonBuy.addEventListener("click", () => {
let name= "nome";
let preco = 45.5;
let quantidade =  quantidadeunidades.value;
let quantCaixas = quantidadecaixas.value;
    alert("Comprar:" + name + "\nPreço: " + preco + "\nQuantidade de Unidades: " + quantidade  + "\nQuantidade de Caixas: " + quantCaixas );
  });
<button id="myButton">Tente</button>

buttonBuy.addEventListener("click", () => {
let name= "nome";
let preco = 45.5;
let quantidade =  quantidadeunidades.value;
let quantCaixas = quantidadecaixas.value;
    alert("Comprar:" + name + "\nPreço" + preco + "\nQuantidade de Unidades" + quantidade  + "\nQuantidade de Caixas" + quantCaixas );
  });

1

Vinicius,

Concatenate values, just put the most (+) as you did, to display in another line, you must use the \n.

There is a very nice way to put variables in a string, it is the string template: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/template_strings

Also, there is the JS String Concat method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/concat

let buttonConcat = document.getElementById("alertaConcat");
let buttonStringConcat = document.getElementById("alertaStringConcat");
let buttonTemplate = document.getElementById("alertaTemplate");

//Concatenção simples
buttonConcat.addEventListener("click", () => {
  let name = "teste";
  let preco = 13;
  let quantidadeunidades = {value: 10};
  let quantidadecaixas = {value: 5};

  alert("Comprar: " + name + ".\nPreço: " + preco + ".\nQuantidade de Unidades: " + quantidadeunidades.value + "\nQuantidade de Caixas: " + quantidadecaixas.value);
});

//Concatenção via método
buttonStringConcat.addEventListener("click", () => {
  let name = "teste";
  let preco = 13;
  let quantidadeunidades = {value: 10};
  let quantidadecaixas = {value: 5};

  alert("Comprar: ".concat(name, ".\nPreço: ", preco, ".\nQuantidade de Unidades: ", quantidadeunidades.value, "\nQuantidade de Caixas: ", quantidadecaixas.value));
});

//Template string
buttonTemplate.addEventListener("click", () => {
  let name = "teste";
  let preco = 13;
  let quantidadeunidades = {value: 10};
  let quantidadecaixas = {value: 5};

  alert(`Comprar: ${name}.\nPreço: ${preco}.\nQuantidade de Unidades: ${quantidadeunidades.value}.\nQuantidade de Caixas: ${quantidadecaixas.value}`);
});
<button id="alertaConcat">Alerta concatenação</button>
<button id="alertaStringConcat">Alerta concatenação via método</button>
<button id="alertaTemplate">Alerta template strings</button>

Note that in both cases, I used n to effect line breaking.

Note: I followed part of your example and created the local variables just to illustrate.

1

If I understand your question correctly then what you want to do is format a string. There are several ways to do this, one very convenient is to use template strings:

Basically you can create one using a severe accent pair (``) instead of single quotes or double quotes. inside right string you can put expressions following the following syntax: ${expressao}

This can be any expression, including the value of a variable.

In this case the code would look like this:

buttonBuy.addEventListener("click", () => {
    alert(`Comprar: ${name}\nPreço: ${preco}\nQuantidade de Unidades: ${quantidadeunidades.value}\nQuantidade de Caixas: ${quantidadecaixas.value}`);
  });

You can learn more about Javascript text formatting on the Mozilla website: Formatting Text - MDN web Docs

Browser other questions tagged javascript

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