0

tengo una tarea donde tengo que hacer 4 algoritmos de ordenamiento (ya los tengo) el problema es que no sé cómo podría enlazar los JS de los algoritmos a un HTML.

Sé que tengo que hacer un form con un input tipo text y un boton pero ¿Qué debería modificar en el JS para poder pedir y mostrar los datos ordenados?

let array = [45, 2, 3, 14, 11];

function bubbleSort (arr) {
    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) { 
            if (arr[j] > arr[j+1]) {
                let aux = arr[j]
                arr[j] = arr[j+1]
                arr[j+1] = aux;
            }
        }
    }
    return arr;
}

console.log(bubbleSort(array));
2
  • No es muy claro lo quie necesitas hacer.. lo que entiendo yo es que necesitas que el usuario ingrese los valores que tienen que ordenarse?
    – David081
    Commented el 19 abr. 2022 a las 18:16
  • Sí básicamente, lo que tengo que hacer es que el usuario ponga los numeros a ordenar y el programa los regrese ordenados, tengo el algoritmo de ordenamiento en JS pero no sé cómo adaptarlo para que me tome los datos ingresados en el HTML. Commented el 19 abr. 2022 a las 19:02

1 respuesta 1

0

te voy a explicar como interactuar entre el html y el javascript, esperando que la explicación le sirva a más usuarios con dudas similares.
HTML:

<label>Introduce los números a ordenar separados por comas:<input type="text" id="numeros" /></label>
<button onclick="bubbleSort()"> Ordenar </button>
<button id="BotonLimpiar"> Limpiar </button>
<div id="resultado"></div>

Lo primero creamos en el html el input y le asignamos un id para después capturar su contenido desde javascript, también creamos dos botones, uno para ejecutar la función de ordenación y otro para limpiar los campos, fíjate que en primer botón utilizamos la propiedad "onclick" desde el html para ejecutar directamente la función de ordenar al hacer click en ese botón y en el segundo le asignamos un id para luego capturar el evento "onclick" directamente desde javascript (simplemente para que veas las dos formas de hacerlo). También creamos un div vacío, donde pondremos los resultados.
Javascript:

let botonparalimpiar = document.getElementById("BotonLimpiar");
botonparalimpiar.onclick = Limpiar;

Localizamos el botón cuyo id es "BotonLimpiar" y le asignamos el evento onclick a la función Limpiar(); que vaciará el texto que haya en el input y lo que hubiese en el div cuyo id es "resultado".

function bubbleSort() {
var texto_input = document.getElementById("numeros").value;

He quitado la variable que recibes en la función, porque vamos a capturar directamente el texto que se haya en el input cuyo id es "numeros", además de que en tu función original recibes un array con los números y ahora estás recibiendo una cadena de texto. Vamos a convertir la cadena en un array para que tu función de ordenación haga su trabajo.

    var NumerosYcomas = texto_input.replace(/[^0-9,.]/g, '');

Con esto, estamos utilizando una expresión regular que hace que todo lo que no sean números, comas o puntos desaparezca del string que nos llega desde el input y lo guarde en la variable NumerosYcomas, de manera que el string "1,18, 25,zz45, 9", se convertiría en "1,18,25,45,9". Si quieres que solo admita números y las comas, simplemente elimina el punto de la expresión regular, pero ten en cuenta que [1,2,2.5,3] se convertiría en [1,2,25,3].

    if (NumerosYcomas.length === 0) {
    document.getElementById('numeros').value = "";
    document.getElementById('resultado').innerHTML = "Debes introducir números";
    return;
}

Ahora, hacemos una validación de la cadena que nos llega ya limpia de caracteres "indeseables". Si como resultado la cadena está vacía, limpiamos el input, mostramos un mensaje en el div "resultado" y finalizamos la función.

var arr = NumerosYcomas.split(',').map(Number);

Una vez validada la cadena, la convertimos en un array utilizando como separador la coma y con la funcion array.map(Number) nos aseguramos que el contenido del array sean números, si hubiesemos utilizado simplemente var arr = NumerosYcomas.split(','); hubiesemos obtenido un array cuyo contenido hubiesen sido strings con el número correspondiente y tendríamos que haber convertido esos strings en números antes de poder ordenarlos, porque [3,20,2] como números se ordenaría [2,3,20], pero como strings sería ["2","20","3"].

    document.getElementById('resultado').innerHTML = arr;

Una vez ordenada la variable arr, ponemos el resultado en el div cuyo id es "resultado". Te dejo el ejemplo para que puedas probarlo, espero haber ayudado a entender como interactuar entre html y javascript de forma básica. Saludos!.

let botonparalimpiar = document.getElementById("BotonLimpiar");
botonparalimpiar.onclick = Limpiar;

function bubbleSort() {
    var texto_input = document.getElementById("numeros").value;
    var NumerosYcomas = texto_input.replace(/[^0-9,.]/g, '');
    if (NumerosYcomas.length === 0) {
        document.getElementById('numeros').value = "";
        document.getElementById('resultado').innerHTML = "Debes introducir números";
        return;
    }
    var arr = NumerosYcomas.split(',').map(Number);

    for (let i = 0; i < arr.length - 1; i++) {
        for (let j = 0; j < arr.length - 1 - i; j++) {
            if (arr[j] > arr[j + 1]) {
                let aux = arr[j]
                arr[j] = arr[j + 1]
                arr[j + 1] = aux;
            }
        }
    }
    //    console.log (arr);
    document.getElementById('resultado').innerHTML = arr;
    //    return arr;
}

function Limpiar() {
    document.getElementById('resultado').innerHTML = "";
    document.getElementById('numeros').value = "";
}
<label>Introduce los números a ordenar separados por comas:<input type="text" id="numeros" /></label>
<button onclick="bubbleSort()"> Ordenar </button>
<button id="BotonLimpiar"> Limpiar </button>
<div id="resultado"></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.