EDICIÓN Revisa la parte de abajo
Podemos hacer lo siguiente:
- Declarar una variable
valor
que guarde la iteración de cada elemento del vector que identificaremos como elemento
- A cada
elemento
que resulte de la iteración lo pasaremos como argumento del constructor Number()
- Llenaremos una nueva variable de tipo
array
con cada elemento
pasado el constructor Number
- Dentro de una variable guardamos la asignación del uso de
sort()
para poder hacer la resta del valor x
- el valor y
- Finalmente imprimimos la variable
ordenado
que contiene nuestro nuevo vector ordenado
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo 1</title>
</head>
<body>
<input type="text" id="texto" />
<button id="button">Crear el vector</button>
<script>
let contenido = document.getElementById("texto")
let button = document.getElementById("button")
let vector = []
let cambiados = []
button.addEventListener("click", () => {
let valor = contenido.value.split(",")
let nuevoVector = valor.forEach((elemento) => {
cambiados.push(Number(elemento))
})
let ordenado = cambiados.sort((x, y) => {
return x - y
})
console.log(ordenado)
})
</script>
</body>
</html>
La edición
Como no me terminaba de cuadrar una solución tan larga, comento lo que estuve probando
- El método
split
genera un vector de valores, del input que le llegó como argumento
- Entonces como
valor
ya es un vector solo basta aplicarle la misma función de sort()
para ordenar los elementos e imprimir el resultado
Aquí esta el código simplificado:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Ejemplo 2</title>
</head>
<body>
<input type="text" id="texto" />
<button id="button">Crear el vector</button>
<script>
let contenido = document.getElementById("texto")
let button = document.getElementById("button")
button.addEventListener("click", () => {
let valor = contenido.value.split(",")
let arreglo = valor.sort((x, y) => {
return x - y
})
console.log(arreglo)
})
</script>
</body>
</html>
Básicamente la diferencia entre el primero y el segundo es que al inicio transformo cada elemento a un tipo number
y en el segundo lo sigo manejando cada elemento del vector como un string
Referencia