bubble sort for simple leaderboard

Question

I am creating a simple video game leader board which will rank the user score against pre-set scores which will place their rank from highest to lowest depending.

<html>
  <!Foundation Page for building our Javascript programs>
  <head>
    <title>The Foundation Page </title>
    <script type="text/javascript">
      function leaderboard()
      {
        var leaderboardarray = new Array (5);
        var n, temp;
        ok=false;
        var score 
        var rank

        score = 150

        leaderboardarray[1] = 50;
        leaderboardarray[2] = 60;
        leaderboardarray[3] = 180;
        leaderboardarray[4] = 120;
        leaderboardarray[5] = score;

        while(!ok)
        {
          ok = true
          for (n=1; n<=5; n=n+1)
          { 
            if (leaderboardarray [n]<leaderboardarray [n-1])
            {
              leaderboardarray [n] = leaderboardarray [n-1];
              ok = false;
            }
          } 
        }

        for (n=5; n>=1; n=n-1) 
          document.write (leaderboardarray [n] + "<br>");
      }

    </script>
  </head>head>
  <body BGCOLOR="WHITE">
    <h2>The Foundation Page </h2>
    <hr>
    <script LANGUAGE="Javascript"> leaderboard() </script>

  </body>
</html>

Its outputting the arrays as normal, but I am stuck on how the array outputs a value from highest to lowest. When I place a value higher than any other value after it, it will only produce the same value. When I change one of the value to Would anyone suggest on what I should do to do so would be much appreciated. I am still new to programming so sorry if I am doing anything silly. Thank you!

[Array.prototype.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) on MDN — Mathletics, Apr 16 '15 at 01:51
Pro tips: Don't use `document.write` and `bgcolor` in your code. And that's not how you write a comment in HTML. (2nd line) — Derek 朕會功夫, Apr 16 '15 at 02:15
I cleaned up your code a bit. I do not think this should affect anything but all of your tags were capitalized. I am not sure if this is technically incorrect but definitely unconventional. In addition to that you forgot to close your head tag. I fixed these few issues. If you are new to programming the most important thing is you build good habits so maybe double check tag HTML syntax convention. — Christian Juth, Apr 16 '15 at 02:27

dting · Answer 1 · 2015-04-16T07:21:41.110

2

You should use Array.sort.

However, the problem with the code you posted is, you aren't actually swapping in your bubble sort. You are just overwriting the smaller value with the larger one.

function bubbleSort(arr) {
  var n = arr.length, swapped, tmp;
  do {
    swapped = false;
    for (var i = 1; i < n; i++) {
      if (arr[i-1] < arr[i]) {
        tmp = arr[i];
        arr[i] = arr[i-1];
        arr[i-1] = tmp;
        swapped = true; 
      }
    }
  } while (swapped && n--)
}

a = [50, 60, 70, 80, 150, 120]

bubbleSort(a);
console.log(a);
// [150, 120, 80, 70, 60, 50]

edited Apr 16 '15 at 07:21

answered Apr 16 '15 at 02:50

dting

35,904
9
89
112

THANK YOU! I've been trying to figure whats messing with it for a while now. – Ruben Apr 16 '15 at 07:20

score 0 · Accepted Answer · edited May 23 '17 at 12:14

Since you're using Javascript without prototype or jQuery, have you tried replacing your while statement with something like this:

leaderboardarray.sort(function(a, b){return b-a});

There is a great write-up of the Javascript sort function at w3schools.

<HTML>
<!--#Foundation Page for building our Javascript programs#-->
<HEAD>
<TITLE>The Foundation Page </TITLE>
<!--fixed this-->
<SCRIPT type="text/javascript">
    function leaderboard()
    {

            var n, temp;
            ok=false;
            var score 
            var rank

            var score = 150

            var leaderboardarray = new Array(5);
                leaderboardarray[0] = 50;
                leaderboardarray[1] = 60;
                leaderboardarray[2] = 180;
                leaderboardarray[3] = 120;
                leaderboardarray[4] = score;

            leaderboardarray.sort(function(a, b){return b-a});
            var myContent = '';
            for (var n=0;n<5;n++) 
                myContent += leaderboardarray[n] + "<br>";

            document.getElementById("leaderBoard").innerHTML = myContent;
    }

    //call the function here


</SCRIPT>
</HEAD>
<!--#Using CSS#-->
<BODY style="background-color:#FFF;">
        <H2>The Foundation Page </H2>
        <HR>
        <!--#This is a placeholder#-->
        <div id="leaderBoard"><script type="text/javascript">leaderboard();</script></div>

</BODY>
</HTML>

Few things about your code that needed to be addressed.

You had two head tags.
You were sorting your array, then showing the output with a decrementing for statement. On this I'm sorting the array in descending order and then showing ascending output.
I also have started arrays at 0 (where they want to be), this allows for less math in the for statements.
I've replaced the bgcolor HTML tag with CSS
Updated the script tag to use type instead of language.
Rather than using document.write which can cause problems, I'm replacing the content of a placeholder div.

Here is a fiddle.

bubble sort for simple leaderboard

2 Answers2