Sort list alphabetically with Javascript

Asked

Viewed 5,586 times

0

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

I was able to just 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 someone help me to add two buttons in this list? One that orders in ascending order the names and another that orders in descending order.

javascript html

  • If the code is simple, it is preferable to place it within the question.

  • One you want A-Z and or Z-A that’s it?

  • I’d rather leave it where it is because it’s easier to run, and tbm I don’t know how to create that part of executing the code inside the sorry post ;\

  • That’s two A-Z buttons and one Z-A button

  • @Tibialize answered, see if anything works let me know and if possible mark as correct :).

2 answers

2


I managed to make it simple:

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>

  • Just what I wanted @Breno, thank you so much for your help

-1

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

  • how do I do that?

  • can you give me an example

  • https://jsfiddle.net/9afggkr7/ .

Browser other questions tagged javascript html

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