I´ve got to write a program in typescript which orders three numbers from three inputs in HTML. Thats what I´ve got so far:

    const lego: HTMLButtonElement = document.getElementById("sorter") as HTMLButtonElement

    const z1input: HTMLInputElement = document.getElementById("zahl1") as HTMLInputElement
    const z2input: HTMLInputElement = document.getElementById("zahl2") as HTMLInputElement
    const z3input: HTMLInputElement = document.getElementById("zahl3") as HTMLInputElement

    lego.addEventListener("click", () => {

        const z1: number = Number(z1input.value);
        const z2: number = Number(z2input.value);
        const z3: number = Number(z3input.value);

        while (z1 > z2 && z1 > z3 ) {
            if (z2 > z3)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z1   z2   z3
            }
            if (z3 > z2)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z1   z3   z2
            }
            if (z2 == z3)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z1   z2   z3
            }

        }
        while (z2 > z1 && z2 > z1 ) {
            if (z1 > z3)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z2   z1   z3
            }
            if (z3 > z1)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z2   z3   z1
            }
            if (z1 == z3)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z2   z1   z3
            }

        }
        while (z3 > z1 && z3 > z2 ) {
            if (z1 > z2)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z3   z1   z3
            }
            if (z2 > z1)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z3   z2   z1
            }
            if (z1 == z2)
            {
                document.getElementById("output").innerText =
                    "Sortierte Reihenfolge:"   z3   z1   z3
            }

        }
    })
})

But when I press the button my website crashes...Are my Loops right?

Its a project for university so I´ve got to do it with Loops. Thanks for your help!

CodePudding user response：

You aren't changing the number's values anywhere. This means that as soon as you enter one of the while loops you'll just stay there and never leave.

That's why your site crashes.

Now regarding solutions, you haven't said very much regarding how you need to solve this and if the requirement is to just use loops, you could just implement something like selection algo (also called min/max sorting sometimes).

CodePudding user response：

Loops are not supposed to be used like this, also you should report the error log if you're asking for help. Anyway I suppose that your website crashes since those are 3 infinite loops.

If you've got to do it with loops you could use them to sort the numbers or just print them them like this:

const lego: HTMLButtonElement = document.getElementById("sorter") as HTMLButtonElement

const z1input: HTMLInputElement = document.getElementById("zahl1") as HTMLInputElement
const z2input: HTMLInputElement = document.getElementById("zahl2") as HTMLInputElement
const z3input: HTMLInputElement = document.getElementById("zahl3") as HTMLInputElement

lego.addEventListener("click", () => {

    const z1: number = Number(z1input.value);
    const z2: number = Number(z2input.value);
    const z3: number = Number(z3input.value);
    const array : number[] = [z1, z2, z3]
    array.sort()

    let index = 0
    document.getElementById("output").innerText = "Sortierte Reihenfolge: "
    while(index < array.length){
        document.getElementById("output").innerText  = `${array[index]} `
        index  
    }

})