Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

395
Vistas
How to arrange the output in alphabetical order in javascript?

I need help as soon as possible. I try have tried various way on how to arrange the output in alphabetical order but none of them seems work. The question is asked to arrange the output in alphabetical order without changing the base code.

The base code:

function add() {
  var name = document.getElementById("id-name").value;
  var address = document.getElementById("id-address").value;
  var content = document.getElementById("id-content").innerHTML;
  document.getElementById("id-content").innerHTML = content + name + "<br/>" + address + "<hr/>";
}
Name: <input type="text" id="id-name" name="name"><br /> Address: <textarea id="id-address" name="address"></textarea><br />
<button id="id-send" onclick="javascript: add();">Send</button>
<hr>
<div id="id-content"></div>

This is the example of the output that it should display:

about 4 years ago · Juan Pablo Isaza
3 Respuestas
Responde la pregunta

0

You could keep an array of submitted data and sort the array alpabetically. This solution should work:

      let listOfData = [];
      function add() {
        var name = document.getElementById("id-name").value;

        var address = document.getElementById("id-address").value;

        var content = document.getElementById("id-content").innerHTML;
        listOfData.push({
          personName: name,
          personAddress: address
        });

        document.getElementById("id-content").innerHTML = "";

        listOfData.sort((a, b) => a.personName.localeCompare(b.personName));
        for (let person of listOfData) {
          document.getElementById(
            "id-content"
          ).innerHTML += `${person.personName} <br/> ${person.personAddress}<br/> <hr/>`;
        }
      }
about 4 years ago · Juan Pablo Isaza Denunciar

0

You could create an array and sort it

I wrapped in a form to have simpler event handling. Also no need for javascript: label on an inline event handler

const list = []; // you can get this from localStorage if you want to save across reloads
window.addEventListener("DOMContentLoaded", () => {
  const content = document.getElementById("id-content"),
    nameField = document.getElementById("id-name"),
    addressField = document.getElementById("id-address");
  const show = () => {
    list.sort((a, b) => a.name.localeCompare(b.name))
    content.innerHTML = list.map(({ name, address }) => `${name}<br/>${address}`).join("<hr/>");
  };

  document.getElementById("myForm").addEventListener("submit", e => {
    e.preventDefault();
    const name = nameField.value;
    const address = addressField.value;
    list.push({ name, address });
    show();
  });
});
<form id="myForm">
  Name: <input type="text" id="id-name" name="name"><br /> Address: <textarea id="id-address" name="address"></textarea><br />
  <button id="id-send">Send</button>
</form>
<hr>

<div id="id-content"></div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

Use this code it will work

function add() {
  var name = document.getElementById("id-name").value;
  var address = document.getElementById("id-address").value;
  let data = document.getElementById("id-content");
  let content = data.innerHTML;

  content = content + name + "<br/>" + address + "<hr>";
  
  let dt = "";
  
  let sortArr = content.split("<hr>").sort().join().split(",");
  
  for (let i = 1; i < sortArr.length; i++) {
    dt += sortArr[i] + "<hr>";
  }

  data.innerHTML = dt;
}
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda