Sort list alphabetically with JavaScript

Question

Sort list alphabetically with JavaScript

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

I have a simple HTML where I need a list of names that I can add, remove, and two buttons that sort in ascending and descending order.

I was only able to add and remove it from the list.

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>

Can anyone help me add two buttons in this list? One that orders in ascending order the names and another that orders in descending order.

javascript html

asked by anonymous 05.10.2017 / 15:51

2 answers

-1

Your upgrade function already sorts in ascending order. To do this in descending order, just create a copy of your refresh function and put convidados = convidados.reverse() after convidados = convidados.sort(); . Then just assign button clicks to those functions.

05.10.2017 / 16:04

Loopback remote auth with mongodb Write to the Session of a Linked Link and destroy another session to do site translation

score 1 · Accepted Answer

I was able to do it in a simple way:

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>