0

Eu tenho um HTML simples onde preciso de uma lista de nomes que eu consiga adicionar, remover e de dois botões que ordene por ordem crescente e decrescente.

Eu consegui fazer somente o adicionar e o remover da lista.

var convidados = new Array();

function InsereConvidado() {
  var conv = document.getElementById("convidado");
  if (conv.value !== '') {
    convidados.push(conv.value);
    conv.value = '';
    AtualizaLista();
  }
}

function AtualizaLista() {
  if (convidados.length > 0) {
    document.getElementById("presentes").innerHTML = "";
    convidados = convidados.sort();
    for (i = 0; i < convidados.length; i++) {
      document.getElementById("presentes").innerHTML += '<li><span id="nome">' + convidados[i] + '</span> <span onClick="RemoverConvidado(this);" style="color: red;">[x]</span></li>';
    }
  } else {
    document.getElementById("presentes").innerHTML = "Nenhum convidado na lista.";
  }
}

function RemoverConvidado(el) {
  var nome = el.parentNode.firstChild.innerHTML;
  for (i = 0; i < convidados.length; i++) {
    if (convidados[i] === nome) {
      convidados.splice(i, 1);
      AtualizaLista();
    }
  }
}
<h4>Lista de Presentes</h4>
<ul id="presentes">Nenhum convidado na lista.</ul>

<h4>Inserir Convidado</h4>
<input type="text" placeholder="Nome do Convidado" id="convidado" />
<button type="button" onClick="InsereConvidado();">Inserir</button>

Alguém pode me ajudar a adicionar dois botões nesta lista? Um que ordene por ordem crescente os nomes e outro que ordene por ordem decrescente.

5
  • Se o código for simples, é preferível que coloque ele dentro da pergunta. 5/10/2017 às 13:59
  • Um você quer A-Z e ou Z-A é isso? 5/10/2017 às 14:00
  • eu prefiro deixar ele aonde está pois ficar mais facil de ser executado, e tbm eu não sei como criar aquela parte de executar o codigo dentro do post desculpa ;\
    – Tibialize
    5/10/2017 às 14:00
  • isso, são dois botoes uma de A-Z e outra de Z-A
    – Tibialize
    5/10/2017 às 14:01
  • @Tibialize respondi, ve se funciona qualquer coisa me avisa e se possível marque como correta :). 5/10/2017 às 14:30

2 Respostas 2

2

Consegui fazer de forma simples:

var convidados = new Array();

function OrdenarInvertido() {
var conv = document.getElementById("convidado");

                conv.value = '';
    convidados = convidados.sort();
    convidados = convidados.reverse(); 
        document.getElementById("presentes").innerHTML = "";

            for (var i = 0; i < convidados.length; i++) {
              document.getElementById("presentes").innerHTML += '<li><span id="nome">' + convidados[i] + '</span> <span onClick="RemoverConvidado(this);" style="color: red;">[x]</span></li>';
    }

    }
    function Ordenar() {
    var conv = document.getElementById("convidado");

                conv.value = '';
    convidados = convidados.sort();
        document.getElementById("presentes").innerHTML = "";

            for (var i = 0; i < convidados.length; i++) {
              document.getElementById("presentes").innerHTML += '<li><span id="nome">' + convidados[i] + '</span> <span onClick="RemoverConvidado(this);" style="color: red;">[x]</span></li>';
    }

    }

        function InsereConvidado() {
            var conv = document.getElementById("convidado");
            if (conv.value !== '') {
                convidados.push(conv.value);
                conv.value = '';
                AtualizaLista();
            }
        }


        function AtualizaLista() {
            if (convidados.length > 0) {
                document.getElementById("presentes").innerHTML = "";
                convidados = convidados.sort();
                for (i = 0; i < convidados.length; i++) {
                    document.getElementById("presentes").innerHTML += '<li><span id="nome">' + convidados[i] + '</span> <span onClick="RemoverConvidado(this);" style="color: red;">[x]</span></li>';
                }
            } else {
                document.getElementById("presentes").innerHTML = "Nenhum convidado na lista.";
            }
        }

        function RemoverConvidado(el) {
            var nome = el.parentNode.firstChild.innerHTML;
            for (i = 0; i < convidados.length; i++) {
                if(convidados[i] === nome) {
                        convidados.splice(i, 1);
                    AtualizaLista();
                    }
            }
        }
<title>Exercício</title>
<body>
    <h4>Lista de Presentes</h4>
    <ul id="presentes">Nenhum convidado na lista.</ul>

    <h4>Inserir Convidado</h4>
    <input type="text" placeholder="Nome do Convidado" id="convidado" />
    <button type="button" onClick="InsereConvidado();">Inserir</button>
  <button type="button" onClick="Ordenar();">Ordenar</button>
  <button type="button" onClick="OrdenarInvertido();">Ordenar Invertido</button>

1
  • Isso mesmo que eu queria @Breno, muito obrigado pela sua ajuda
    – Tibialize
    5/10/2017 às 15:55
-1

A sua função atualizar já ordena por ordem crescente. Para fazer por ordem decrescente, é só criar uma cópia da sua função atualizar e colocar convidados = convidados.reverse() após convidados = convidados.sort();. Depois é só atribuir os cliques dos botões a essas funções.

3
  • como que eu faço isso?
    – Tibialize
    5/10/2017 às 14:06
  • pode me dar um exemplo
    – Tibialize
    5/10/2017 às 14:06
  • jsfiddle.net/9afggkr7 Utilizei o seu mesmo método de Atualizar, alterando-o para receber um parâmetro que indica se a ordenação deve ocorrer em ordem crescente ou decrescente. 5/10/2017 às 14:18

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 .