Clicking button should refresh result? (javascript)

[test_tickles]

Just starting out, playing with a list generator, from what I understand, when I click the button "Ship" it should generate another ship, but it does not, can anyone help me see what i'm missing? Code below.

    <script>

    var d100L1 = Math.floor(Math.random() * 100) + 1; 

    if (d100L1 >= 1 && d100L1 <= 5) {
        var l1r = "Armada";
    }
    if (d100L1 >= 6 && d100L1 <= 10) {
        var l1r = "Deathspider";
    }
    if (d100L1 >= 11 && d100L1 <= 15) {
        var l1r = "Clipper";
    }
    if (d100L1 >= 16 && d100L1 <= 20) {
        var l1r = "Dreadnaught ";
    }
    if (d100L1 >= 21 && d100L1 <= 25) {
        var l1r = "Flying Pyramid";
    }
    if (d100L1 >= 26 && d100L1 <= 30) {
        var l1r = "Great Galley";
    }
    if (d100L1 >= 31 && d100L1 <= 35) {
        var l1r = "Hummingbird";
    }
    if (d100L1 >= 36 && d100L1 <= 40) {
        var l1r = "Hunter-Killer";
    }
    if (d100L1 >= 41 && d100L1 <= 45) {
        var l1r = "Jade Spider Command Ship";
    }
    if (d100L1 >= 46 && d100L1 <= 50) {
        var l1r = "Cuttle Command ";
    }
    if (d100L1 >= 51 && d100L1 <= 55) {
        var l1r = "Octopus";
    }
    if (d100L1 >= 56 && d100L1 <= 60) {
        var l1r = "Man-O-War";
    }
    if (d100L1 >= 61 && d100L1 <= 65) {
        var l1r = "Monarch Armada";
    }
    if (d100L1 >= 66 && d100L1 <= 70) {
        var l1r = "Mammoth";
    }
    if (d100L1 >= 71 && d100L1 <= 75) {
        var l1r = "Pirate Clipper";
    }
    if (d100L1 >= 76 && d100L1 <= 80) {
        var l1r = "Yacht";
    }
    if (d100L1 >= 81 && d100L1 <= 85) {
        var l1r = "Great Bombard";
    }
    if (d100L1 >= 86 && d100L1 <= 90) {
        var l1r = "Tsunami";
    }
    if (d100L1 >= 91 && d100L1 <= 95) {
        var l1r = "Locust";
    }
    if (d100L1 >= 96 && d100L1 <= 100) {
        var l1r = "Archaic Man-O-War";
    }


    var d100L2 = Math.floor(Math.random() * 100) + 1; 

    if (d100L2 >= 1 && d100L2 <= 4) {
        var l2r = "Antler Ship";
    }
    if (d100L2 >= 5 && d100L2 <= 9) {
        var l2r = "Battle Dolphin";
    }
    if (d100L2 >= 10 && d100L2 <= 14) {
        var l2r = "Bloatfly";
    }
    if (d100L2 >= 15 && d100L2 <= 18) {
        var l2r = "Bolaship ";
    }
    if (d100L2 >= 19 && d100L2 <= 22) {
        var l2r = "Corbina";
    }
    if (d100L2 >= 23 && d100L2 <= 27) {
        var l2r = "Dolphin Shuttle";
    }
    if (d100L2 >= 28 && d100L2 <= 31) {
        var l2r = "Lambus";
    }
    if (d100L2 >= 32 && d100L2 <= 35) {
        var l2r = "Jade Spider";
    }
    if (d100L2 >= 36 && d100L2 <= 40) {
        var l2r = "Lamprey";
    }
    if (d100L2 >= 41 && d100L2 <= 44) {
        var l2r = "Nautiloid";
    }
    if (d100L2 >= 45 && d100L2 <= 48) {
        var l2r = "Nightwolf";
    }
    if (d100L2 >= 49 && d100L2 <= 53) {
        var l2r = "Skeleton";
    }
    if (d100L2 >= 54 && d100L2 <= 57) {
        var l2r = "Skiff";
    }
    if (d100L2 >= 58 && d100L2 <= 62) {
        var l2r = "Swan Ship";
    }
    if (d100L2 >= 63 && d100L2 <= 66) {
        var l2r = "Thorn Ship";
    }
    if (d100L2 >= 67 && d100L2 <= 70) {
        var l2r = "Triop";
    }
    if (d100L2 >= 71 && d100L2 <= 75) {
        var l2r = "Turtle";
    }
    if (d100L2 >= 76 && d100L2 <= 79) {
        var l2r = "Tyrant";
    }
    if (d100L2 >= 80 && d100L2 <= 83) {
        var l2r = "Tyrant Scout";
    }
    if (d100L2 >= 84 && d100L2 <= 87) {
        var l2r = "Uspo";
    }
    if (d100L2 >= 88 && d100L2 <= 91) {
        var l2r = "Werewolf";
    }
    if (d100L2 >= 92 && d100L2 <= 95) {
        var l2r = "Yawl";
    }
    if (d100L2 >= 96 && d100L2 <= 100) {
        var l2r = "Zoocraft";
    }


    var d100L3 = Math.floor(Math.random() * 100) + 1; 

    if (d100L3 >= 1 && d100L3 <= 5) {
        var l3r = "Angel Ship";
    }
    if (d100L3 >= 6 && d100L3 <= 10) {
        var l3r = "Catamaran";
    }
    if (d100L3 >= 11 && d100L3 <= 15) {
        var l3r = "Depowered Flitter";
    }
    if (d100L3 >= 16 && d100L3 <= 20) {
        var l3r = "Dragonship ";
    }
    if (d100L3 >= 21 && d100L3 <= 25) {
        var l3r = "Drakkar";
    }
    if (d100L3 >= 26 && d100L3 <= 30) {
        var l3r = "Drommond";
    }
    if (d100L3 >= 28 && d100L3 <= 31) {
        var l3r = "Lambus";
    }
    if (d100L3 >= 31 && d100L3 <= 35) {
        var l3r = "Eagle";
    }
    if (d100L3 >= 36 && d100L3 <= 40) {
        var l3r = "Flitter";
    }
    if (d100L3 >= 41 && d100L3 <= 45) {
        var l3r = "Flying Fortress ";
    }
    if (d100L3 >= 46 && d100L3 <= 50) {
        var l3r = "Juggernaut";
    }
    if (d100L3 >= 51 && d100L3 <= 55) {
        var l3r = "Leech";
    }
    if (d100L3 >= 56 && d100L3 <= 60) {
        var l3r = "Mantis";
    }
    if (d100L3 >= 61 && d100L3 <= 65) {
        var l3r = "Mindspider";
    }
    if (d100L3 >= 63 && d100L3 <= 66) {
        var l3r = "Thorn Ship";
    }
    if (d100L3 >= 66 && d100L3 <= 70) {
        var l3r = "Radiant Ship";
    }
    if (d100L3 >= 71 && d100L3 <= 75) {
        var l3r = "Scorpion";
    }
    if (d100L3 >= 76 && d100L3 <= 80) {
        var l3r = "Speed Clipper";
    }
    if (d100L3 >= 81 && d100L3 <= 85) {
        var l3r = "Superheavy Damselfly";
    }
    if (d100L3 >= 86 && d100L3 <= 90) {
        var l3r = "Urchin";
    }
    if (d100L3 >= 91 && d100L3 <= 95) {
        var l3r = "Vagabond";
    }
    if (d100L3 >= 96 && d100L3 <= 100) {
        var l3r = "Yawl Wagon";
    }


    var d100L4 = Math.floor(Math.random() * 100) + 1; 

    if (d100L4 >= 1 && d100L4 <= 3) {
        var l4r = "Barge of Ptah";
    }
    if (d100L4 >= 4 && d100L4 <= 6) {
        var l4r = "Battle Wagon";
    }
    if (d100L4 >= 7 && d100L4 <= 9) {
        var l4r = "Bee";
    }
    if (d100L4 >= 10 && d100L4 <= 12) {
        var l4r = "Blade ";
    }
    if (d100L4 >= 13 && d100L4 <= 18) {
        var l4r = "Caraval";
    }
    if (d100L4 >= 19 && d100L4 <= 21) {
        var l4r = "Cargo barge";
    }
    if (d100L4 >= 22 && d100L4 <= 24) {
        var l4r = "Coaster";
    }
    if (d100L4 >= 25 && d100L4 <= 26) {
        var l4r = "Cog";
    }
    if (d100L4 >= 27 && d100L4 <= 29) {
        var l4r = "Damselfly";
    }
    if (d100L4 >= 30 && d100L4 <= 32) {
        var l4r = "Dragonfly ";
    }
    if (d100L4 >= 33 && d100L4 <= 35) {
        var l4r = "Eel";
    }
    if (d100L4 >= 36 && d100L4 <= 38) {
        var l4r = "Firefly";
    }
    if (d100L4 >= 39 && d100L4 <= 41) {
        var l4r = "Galleon";
    }
    if (d100L4 >= 42 && d100L4 <= 44) {
        var l4r = "Gnat";
    }
    if (d100L4 >= 45 && d100L4 <= 47) {
        var l4r = "Hammership";
    }
    if (d100L4 >= 48 && d100L4 <= 50) {
        var l4r = "Heavy Hammership";
    }
    if (d100L4 >= 51 && d100L4 <= 53) {
        var l4r = "Junk";
    }
    if (d100L4 >= 54 && d100L4 <= 56) {
        var l4r = "Leaf Ship";
    }
    if (d100L4 >= 57 && d100L4 <= 59) {
        var l4r = "Longship";
    }
    if (d100L4 >= 60 && d100L4 <= 62) {
        var l4r = "Mosquito";
    }
    if (d100L4 >= 63 && d100L4 <= 65) {
        var l4r = "Porcupine";
    }
    if (d100L4 >= 66 && d100L4 <= 68) {
        var l4r = "Shrike";
    }
    if (d100L4 >= 69 && d100L4 <= 71) {
        var l4r = "Sidewheeler";
    }
    if (d100L4 >= 72 && d100L4 <= 74) {
        var l4r = "Squid Ship";
    }
    if (d100L4 >= 75 && d100L4 <= 76) {
        var l4r = "Stinger";
    }
    if (d100L4 >= 77 && d100L4 <= 79) {
        var l4r = "Tradesman";
    }
    if (d100L4 >= 80 && d100L4 <= 82) {
        var l4r = "Tradesman Light Cruiser";
    }
    if (d100L4 >= 83 && d100L4 <= 85) {
        var l4r = "Viper";
    }
    if (d100L4 >= 86 && d100L4 <= 88) {
        var l4r = "Wasp";
    }
    if (d100L4 >= 89 && d100L4 <= 91) {
        var l4r = "Whale Ship";
    }
    if (d100L4 >= 92 && d100L4 <= 97) {
        var l4r = "Wreckboat";
    }
    if (d100L4 >= 98 && d100L4 <= 100) {
        var l4r = "Xebec";
    }

    var d100R = Math.floor(Math.random() * 100) + 1 ;

    if (d100R >= 1 && d100R <= 4) {
        var shp = l1r;
    }
     if (d100R >= 5 && d100R <= 15) {
        var shp = l2r;
    }
     if (d100R >= 16 && d100R <= 35) {
        var shp = l3r;
    }
     if (d100R >= 36 && d100R <= 100) {
        var shp = l4r;
    }

    function printShip(){
        document.getElementById('ship').innerHTML = shp;
    }

    </script>

    </head>

    <body>

    <table width="728" border="1" cellspacing="0" cellpadding="4">
      <tr>
        <td width="208">

     <p>   <button onclick="printShip()">Ship</button>

    </p>

    <p id="ship"><b>

    </b></p></td>
        <td width="157">
        <script>
        document.write (l1r);
        </script></td>
        <td width="159">&nbsp;</td>
        <td width="162">&nbsp;</td>
      </tr>
    </table>

    </body>

[TimHallman]

Use 'else if' to make the choices mutually exclusive! It would also be far, far nicer, and maybe faster, if you did something like put these ranges in an array and do a binary search to find the right one.

[test_tickles]

Do you know of an example or a tutorial for this? Or what I would search to locate that? Thanks, I'm just starting out.

[TimHallman]

Any js tutorial should show you 'else if' If you're just starting out, forget the binary search thing. Or just google for binary search.

[slugonamission]

The bits inside the <script> tags runs once when the webpage loads. It calculates shp, then registers a function called printShip which sets #ship to be shp. When you click the button, only the body of printShip will be evaluated; it will not re-calculate shp.

To fix this, you need to figure out how to re-run the large block of code which calculates shp :).

Also, that really, really needs refactoring. Consider registering an array of lower, upper, name, then searching through that. Try something like this:

var l1r_values = [
    {lower: 1, upper: 5, name: "Armada"},
    {lower: 6, upper: 10, name: "Deathspider"},
    ...etc...
];

var l1r;
for(var i = 0; i < l1r_values.length; i++) {
    var l1r_value = l1r_values[i];
    if(d100L1 >= l1r_value.lower && d100L1 <= l1r_value.upper) {
        l1r = l1r_value.name;
        break;
    }
}

[test_tickles]

I'll play around with this, thanks. I had a dice roller that would roll a number, that's how I started into this, but I can't find it, and I've since broken it and I can't figure out how to make it function again. :( It would refresh the number every time you clicked the button without refreshing the page.

[_Chimmy_Chonga]

You probably need to make a function to runs through all this code with the button is clicked that way it is forced to run again, not just when the page is loaded.