1

Estou tentando criar um menu de opções para que o usuário escolha um dos 20 exercícios anteriores para abrir no navegador. Só que ao invés de criá-lo manualmente, uso a estrutura de repetição for com duas variáveis x e i para criar este menu automaticamente. Mas eu queria colocar este texto gerado pelo laço dentro de uma caixa de diálogo alert(texto). Já tentei de várias formas, mas nenhuma delas deram sucesso.

1º Tentativa

var x;
var i = 38;
for (x = 0; x < 20; x++) {
  texto = (x+1) + "- Exercício" +(i++)+ "\n";
}
var menu = parseInt(prompt(texto));

2º Tentativa

var x; 
var i = 28;
document.write("<div id='menu'>");
for (x = 0; x <= 20; x++) {
  document.write((x+1) + "- Exercício" +(i++)+ "<br>");
}
document.write("</div>");
var texto = document.getElementById('menu');
var alert(texto);

3º Tentativa

var x;
var i = 38;
alert("Escolha um exercício para abrir:");
for (x = 0; x < 20; x++) {
  var menu = parseInt(prompt((x+1) + "- Exercício " +(i++)+ "\n"));
}

Pergunta: É possível criar este menu grande dentro de uma caixa de diálogo usando apenas um laço de repetição?
Obs. Estou apenas começando a montá-lo, e se estiver faltando alguma informação, não desconsidere esta pergunta. :-'

1 Resposta 1

3

É possível criar este menu grande dentro de uma caixa de diálogo usando apenas um laço de repetição?

Resposta rápida: não.

O alert não funciona como uma caixa de seleção. Se você criar um loop que chama alertas (alert) ou caixas de diálogo (como o prompt), uma será chamada após a outra, veja:

// Note que assim que você fechar uma alerta,
// outra aparecerá logo em seguida, até chegar
// na décima (e final) iteração.
for (let i = 1; i <= 10; i++) {
  alert(`Exercício ${i}`);
}

Suponho que o que você precisa criar é uma caixa de seleção:

// Criamos um menu de seleção:
const select = document.createElement('select');

// A cada iteração, adicionamos mais uma
// opção ao menu de seleção (criado acima):
for (let i = 1; i <= 10; i++) {
  const option = document.createElement('option');
  option.value = i;
  option.textContent = `Exercício ${i}`;
  select.appendChild(option);
}

// Criamos um listener de evento para saber
// quando um exercício for selecionado:
select.addEventListener('change', (event) => {
  console.log(`Exercício selecionado: ${event.target.value}`);
});

// Adicionamos o menu de seleção ao <body>:
document.body.appendChild(select);

Se voc quiser algo mais no formato do alert, e não um menu de seleção, como demonstrado, sugiro que dê uma olhada em bibliotecas como a SweetAlert2.

Referência:

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 .