Edit in JSFiddle

precentResult = 0;
//hides irrelevant units---------------------->>>

function hideUnnecessaryUnits() {

    if ($('#boss').val() == 'octopus') {
        $('.seaUnit').css('display', 'block');
        $('.landUnit').css('display', 'none');
    }
    if ($('#boss').val() != 'octopus') {
        $('.seaUnit').css('display', 'none');
        $('.landUnit').css('display', 'block');
    }
}

function Answer() {
    // sets the unit numbers for each boss ----------->>
    berForDraMol = [
        50, 300, 2000, 4000, 10000, 15000, 20000, 30000, 45000, 60000];
    ranForDraMol = [
        84, 500, 3334, 6667, 16667, 25000, 33334, 50000, 75000, 100000];
    guaForDraMol = [
        250, 1500, 10000, 20000, 50000, 75000, 100000, 150000, 225000, 300000];
    temForDraMol = [
        100, 600, 4000, 8000, 20000, 30000, 40000, 60000, 90000, 120000];
    croForDra = [
        42, 250, 1700, 3300, 8300, 12500, 17000, 25000, 37500, 50000];
    kniForDra = [
        19, 112, 756, 1467, 3689, 5556, 7556, 11112, 16667, 22223];
    magForDraHyd = [
        36, 215, 1429, 2858, 7143, 10715, 14286, 21429, 32143, 42858];
    warForDraHyd = [
        21, 125, 834, 1667, 4167, 6250, 8334, 12500, 18750, 250000];
    palForDra = [
        28, 167, 1134, 2200, 5534, 8334, 11334, 16667, 25000, 33334];
    croForMolHyd = [
        63, 375, 2500, 5000, 12500, 18750, 25000, 37500, 56250, 75000];
    kniForMolHyd = [
        28, 167, 1112, 2223, 5556, 8334, 11112, 16667, 25000, 33334];
    palForMolHyd = [
        42, 250, 1667, 3334, 8334, 12500, 16667, 25000, 37500, 50000];
    berForHyd = [
        34, 200, 1360, 2640, 6640, 10000, 13600, 20000, 30000, 40000];
    ranForHyd = [
        56, 334, 2267, 4400, 11067, 16667, 22667, 33334, 50000, 66667];
    guaForHyd = [
        168, 1000, 6800, 13200, 33200, 50000, 68000, 100000, 150000, 200000];
    temForHyd = [
        68, 400, 2720, 5280, 13280, 20000, 27200, 40000, 60000, 80000];
    magForMol = [
        24, 143, 972, 1886, 4743, 7143, 9715, 14286, 21429, 28572];
    warForMol = [
        14, 84, 567, 1100, 2767, 4167, 5667, 8664, 12500, 16667];
    sloForOct = [
        2, 9, 57, 110, 277, 417, 567, 834, 1250, 1667];
    friForOct = [
        1, 4, 23, 44, 111, 167, 227, 334, 500, 667];
    warForOct = [
        1, 1, 6, 11, 28, 42, 57, 84, 125, 167];

    //outputs correct choice--------->
    if ($('#boss').val() == 'dragon' || $('#boss').val() == 'moloch') {
        for (var a = 0; a <= 10; a++) {
            if ($('#unit').val() == 'berserkers') {
                if ($('#level').val() == (a + 1)) {
                    unitsToWin = berForDraMol[a];
                }
            }
            if ($('#unit').val() == 'rangers') {
                if ($('#level').val() == (a + 1)) {
                    unitsToWin = ranForDraMol[a];
                }
            }
            if ($('#unit').val() == 'guardians') {
                if ($('#level').val() == (a + 1)) {
                    unitsToWin = guaForDraMol[a];
                }
            }
            if ($('#unit').val() == 'templars') {
                if ($('#level').val() == (a + 1)) {
                    unitsToWin = temForDraMol[a];
                }
            }

        }
    }
    if ($('#boss').val() == 'dragon') {
        for (var b = 0; b <= 10; b++) {
            if ($('#unit').val() == 'crossbowmen') {
                if ($('#level').val() == (b + 1)) {
                    unitsToWin = croForDra[b];
                }
            }
            if ($('#unit').val() == 'knights') {
                if ($('#level').val() == (b + 1)) {
                    unitsToWin = kniForDra[b];
                }
            }

            if ($('#unit').val() == 'paladins') {
                if ($('#level').val() == (b + 1)) {
                    unitsToWin = palForDra[b];
                }
            }
        }
    }
    if ($('#boss').val() == 'hydra' || $('#boss').val() == 'moloch') {
        for (var c = 0; c <= 10; c++) {
            if ($('#unit').val() == 'crossbowmen') {
                if ($('#level').val() == (c + 1)) {
                    unitsToWin = croForMolHyd[c];
                }
            }
            if ($('#unit').val() == 'knights') {
                if ($('#level').val() == (c + 1)) {
                    unitsToWin = kniForMolHyd[c];
                }
            }
            if ($('#unit').val() == 'paladins') {
                if ($('#level').val() == (c + 1)) {
                    unitsToWin = palForMolHyd[c];
                }
            }
        }

    }

    if ($('#boss').val() == 'hydra') {
        for (var d = 0; d <= 10; d++) {
            if ($('#unit').val() == 'berserkers') {
                if ($('#level').val() == (d + 1)) {
                    unitsToWin = berForHyd[d];
                }
            }
            if ($('#unit').val() == 'rangers') {
                if ($('#level').val() == (d + 1)) {
                    unitsToWin = ranForHyd[d];
                }
            }
            if ($('#unit').val() == 'guardians') {
                if ($('#level').val() == (d + 1)) {
                    unitsToWin = guaForHyd[d];
                }
            }
            if ($('#unit').val() == 'templars') {
                if ($('#level').val() == (d + 1)) {
                    unitsToWin = temForHyd[d];
                }
            }

        }
    }
    if ($('#boss').val() == 'hydra' || $('#boss').val() == 'dragon') {
        for (var e = 0; e <= 10; e++) {
            if ($('#unit').val() == 'mages') {
                if ($('#level').val() == (e + 1)) {
                    unitsToWin = magForDraHyd[e];
                }
            }
            if ($('#unit').val() == 'warlocks') {
                if ($('#level').val() == (e + 1)) {
                    unitsToWin = warForDraHyd[e];
                }
            }

        }

    }
    if ($('#boss').val() == 'moloch') {
        for (var f = 0; f <= 10; f++) {
            if ($('#unit').val() == 'mages') {
                if ($('#level').val() == (f + 1)) {
                    unitsToWin = magForMol[f];
                }
            }
            if ($('#unit').val() == 'warlocks') {
                if ($('#level').val() == (f + 1)) {
                    unitsToWin = warForMol[f];
                }
            }

        }
    }
    if ($('#boss').val() == 'octopus') {
        for (var g = 0; g <= 10; g++) {
            if ($('#unit').val() == 'sloops') {
                if ($('#level').val() == (g + 1)) {
                    unitsToWin = sloForOct[g];
                }
            }
            if ($('#unit').val() == 'frigates') {
                if ($('#level').val() == (g + 1)) {
                    unitsToWin = friForOct[g];
                }
            }
            if ($('#unit').val() == 'war galleons') {
                if ($('#level').val() == (g + 1)) {
                    unitsToWin = warForOct[g];
                }
            }


        }
    }


}
//for less than guarenteed boss kill -------------->>

function calculatePrecentage(fullUnits, precentage) {
    var number = fullUnits;
    var precent = precentage;
    var result = (number / 100) * precent;
    return Math.ceil(result);

}
//calculates research bonus ---------->>

function researchBonus() {
    unitsToWin = Math.ceil(unitsToWin / (1 + ($('#researchBonus').val() / 100)));

}
//writes the results in a div------------->>

function outputAnswer() {
    if ($('#unit').val() == 'unit' || $('#boss').val() == 'boss' || $('#level').val() == 'level') {
        unitsToWin = 'blank fields';
        $('#output').text('please refresh the page, and fill in ALL the fields.')
    }
    else {
        $('#guaranteed').text('you will need ' + unitsToWin + ' ' + $('#unit').val() + ' for guaranteed ' + $('#boss').val() + ' kill.');
        $('#seventyFive').text('with ' + calculatePrecentage(unitsToWin, 56.25) + ' ' + $('#unit').val() + ' you will have 75% chance for a kill.');
        $('#fifty').text('with ' + calculatePrecentage(unitsToWin, 25) + ' ' + $('#unit').val() + ' you will have 50% chance for a kill.');
        $('#twentyFive').text('with ' + calculatePrecentage(unitsToWin, 12.5) + ' ' + $('#unit').val() + ' you will have 25% chance for a kill.');
    }

}
//----- in the mixed troops script, appends troops to log--->>>>>>>

function clear()
{
    $('#addedTroops').html('');
    $('#availibleTroops').val('0');
    $('#requiredTroops').val('0');
    precentResult = 0;
    $('#precentageOfDone').text(precentResult)
}
function calculatePrecents(availible,required)
{
    var divide = availible/required;
    var answerPrecent = divide*100;
    return answerPrecent;
}
function logTroops()
{
    var availibleTroops = $('#availibleTroops').val();
    $('#addedTroops').append('<span>'+availibleTroops+' '+$('#unit').val()+'</span>.<br>');
    if (precentResult === 0)
    {
        precentResult = calculatePrecents($('#availibleTroops').val(),$('#requiredTroops').val());
    }
    else
    {
        precentResult = precentResult + precentResult;
    }
    
    
    
    $('#precentageOfDone').text(precentResult + 'this function is really buggy, sorry, under development');
}
//assigns actions and reactions---------------->>>

function eventListeners() {
    $('#boss').change(function() {
        hideUnnecessaryUnits();
        $('#killedBoss').text($('#boss').val());
    });
    $('#unit').change(function() {
        $('.researchedUnit').text($('#unit').val());
    });
    $('#answer').click(function() {
        Answer();
        researchBonus();
        outputAnswer();
    });
    $('#accessibility').click(function() {
        $('span').css('color', 'black');
        $('span').css('text-shadow', 'none');
    });
    $('#mixed').click(function() {
        $('#mixedTroopsCalculator').show('slow');
    });
    $('#close').click(function() {
        $('#mixedTroopsCalculator').hide('slow');
    });
    $('#mixedTroopsCalculate').click(function() {
        logTroops();
    });
     $('#clear').click(function() {
        clear()
    });
}

//groups actions that should be ready once the page loads--------------->>

function onStart() {
    $('.seaUnit').css('display', 'none');
    $('#mixedTroopsCalculator').css('display', 'none');
    
}
//activates script------------------->>
$(document).ready(function() {
    
    eventListeners();
    onStart();
 
});

//----------------------the like script, ignore------------>>>>>>>>
window.___jsl = window.___jsl || {};
window.___jsl.h = window.___jsl.h || 'r;gc/22101226-79e15714';
window.___gpq = [];
window.gapi = window.gapi || {};
window.gapi.plusone = window.gapi.plusone || (function() {
    function f(n) {
        return function() {
            window.___gpq.push(n, arguments)
        }
    }
    return {
        go: f('go'),
        render: f('render')
    }
})();

function __bsld() {
    var p = window.gapi.plusone = window.googleapisv0.plusone;
    var f;
    while (f = window.___gpq.shift()) {
        p[f] && p[f].apply(p, window.___gpq.shift())
    }
    if (gadgets.config.get("gwidget")["parsetags"] !== "explicit") {
        gapi.plusone.go();
    }
}
window['___jsl'] = window['___jsl'] || {};
window['___jsl']['u'] = 'https:\/\/apis.google.com\/js\/plusone.js';
window['___jsl']['f'] = ['googleapis.client', 'plusone'];
window['___lcfg'] = {
    "gwidget": {
        "parsetags": "onload"
    },
    "rpc": {
        "commSwf": "//xpc.googleusercontent.com/gadgets",
        "passReferrer": "p2c:query",
        "parentRelayUrl": "/rpc_relay.html"
    },
    "iframes": {
        ":socialhost:": "https://apis.google.com",
        "plusone_m": {
            "params": {
                "count": "#",
                "url": "#",
                "size": "#"
            },
            "url": ":socialhost:/u/:session_index:/_/+1/button"
        },
        "plusone": {
            "params": {
                "count": "#",
                "url": "#",
                "size": "#"
            },
            "url": ":socialhost:/u/:session_index:/_/+1/button"
        }
    },
    "googleapis.config": {
        "requestCache": {
            "enabled": true
        },
        "methods": {
            "chili.people.list": true,
            "pos.plusones.list": true,
            "chili.entities.starred.insert": {
                "cache": {
                    "invalidates": ["chili.entities.starred", "chili.entitiesDefaultAcl"]
                }
            },
            "chili.people.get": true,
            "chili.entities.get": true,
            "pos.plusones.delete": true,
            "chili.entities.starred.delete": true,
            "chili.entities.list": true,
            "pos.plusones.get": true,
            "chili.groups.list": true,
            "pos.plusones.getDefaultAcl": {
                "cache": {
                    "enabled": true
                }
            },
            "chili.entities.starred.get": true,
            "pos.plusones.insert": true,
            "chili.activities.list": true,
            "chili.entitiesDefaultAcl.get": true,
            "chili.entities.starred.list": true,
            "chili.activities.get": true,
            "chili.activities.search": true,
            "pos.plusones.getSignupState": true
        },
        "versions": {
            "chili": "v1",
            "pos": "v1"
        },
        "rpc": "/rpc",
        "transport": {
            "isProxyShared": true
        },
        "sessionCache": {
            "enabled": true
        },
        "proxy": "https://clients6.google.com/static/proxy.html",
        "developerKey": "AIzaSyCKSbrvQasunBoV16zDH9R33D88CeLr9gQ",
        "jsh": "r;gc/22101226-79e15714",
        "auth": {
            "useInterimAuth": false
        }
    }
};
var jsloader = window.jsloader || {};
var gapi = window.gapi || {};
(function() {
    function l() {
        return window.___jsl = window.___jsl || {}
    }

    function n(b, e, c, d) {
        c = p(c).join(b);
        d && d.length > 0 && (c += e + p(d).join(b));
        return c
    }

    function r(b) {
        for (var e = {}, c = 0, d; d = b[c]; c++) e[d] = 1;
        return e
    }

    function p(b) {
        var e = [],
            c;
        for (c in r(b)) e.push(c);
        return e.sort()
    }

    function s(b) {
        m = g = "";
        q = {};
        j = [];
        h = window.console || window.opera && window.opera.postError;
        k = b;
        var e;
        if (b = (e = k.match(u)) || (e = k.match(v)) ? e[2] : l().h) if (e = b.split(";"), g = e.shift(), m = (b = g !== "s" && g !== "r") ? e.shift() : "https://ssl.gstatic.com/webclient/js", o = (b = g !== "s" && g !== "i") && e.shift(), t = (b = g === "d") && (e.shift() || "gcjs-3p"), b = g === "s" || g === "i") for (var b = 0, c; c = e[b]; b++) {
            c = c.split("@");
            var d = q,
                a, f = c[0].split("!");
            a = f[0].split(":");
            f = f[1] && f[1].split(":");
            a = n(":", "!", a, f);
            d[a] = c[1]
        }
    }
    var u = /\?([^&#]*&)*jsh=([^&#]*)/,
        v = /#([^&]*&)*jsh=([^&]*)/,
        w = /^https:\/\/ssl.gstatic.com\/webclient\/js(\/[a-zA-Z0-9_\-]+)*\/[a-zA-Z0-9_\-\.:!]+\.js$/,
        x = /^(https?:)?\/\/([^/:@]*)(:[0-9]+)?\//,
        g, m, t, o, q, j, h, k;
    s(document.location.href);
    jsloader.load = function(b, e) {
        var c;
        if (!b || b.length == 0) h && h.warn("Cannot load empty features.");
        else {
            var d;
            d = r(j);
            for (var a = !0, f = 0, i; i = a && b[f]; f++) a = a && d[i];
            (d = a) ? (d = "Cannot load loaded features [" + b.join(",") + "].", h && h.warn(d)) : g === "s" || g === "i" ? (d = n(":", "!", b, j), (c = q[d]) ? c = m + "/" + c + ".js" : (h && h.warn("Cannot find features [" + d + "]."), c = void 0)) : g === "d" ? (d = m + "/" + n(":", "!", b, j), d += ".js?container=" + t + "&c=2&jsload=0", o && (d += "&r=" + o), c = d) : g === "r" || g === "f" ? c = m + "/" + o + "/" + n("__", "--", b, j) + ".js" : (d = "Cannot respond for features [" + b.join(",") + "].", h && h.warn(d))
        }
        d = b;
        a = e;
        if (c) {
            if (a) {
                if (l().c) throw "Cannot continue until a pending callback completes.";
                l().c = a;
                l().o = 1
            }
            a = c;
            g === "s" || g === "r" ? a = a.match(w) : (f = a.match(x), (a = l().m) && f ? (f = f[2], i = f.lastIndexOf(a), a = (i == 0 || a.charAt(0) == "." || f.charAt(i - 1) == ".") && f.length - a.length == i) : a = !1);
            if (!a) throw "Cannot load url " + c + ".";
            if (window.___gapisync === !0) a = !0;
            else {
                a = !1;
                f = document.getElementsByTagName("meta");
                i = 0;
                for (var k; k = !a && f[i]; ++i)"generator" == k.getAttribute("name") && "blogger" == k.getAttribute("content") && (a = !0)
            }
            a ? document.write('<script src="' + c + '"><\/script>') : (a = document.createElement("script"), a.setAttribute("src", c), document.getElementsByTagName("head")[0].appendChild(a));
            j = p(j.concat(d))
        } else a && a()
    };
    jsloader.reinitialize_ = function(b) {
        s(b)
    }
})();
gapi.load = function(a, b) {
    jsloader.load(a.split(":"), b)
};
gapi.load('googleapis.client:plusone', window['__bsld']);

//----------------------------->>>>>

<div id="wrapper">
    <h1 title="this site looks pretty damn good in all modern browsers, but was optimized for google chrome. if you have trouble seeing any of the elements below, please update your browser to it's latest version, and enjoy a whole new world of web experience! users of Internet Explorer 8 and below.... go get a new browser.">
        boss raids calculator</h1>
    <div id="i">fill in the blanks from the selections (Make a selection from each field, or the
        script will fail):</div>
    <p>
        I want to attack a/n
        <select id="boss" title="the name of the boss you want to attack">
            <option class="defaultOption">boss</option>
            <option>dragon</option>
            <option>moloch</option>
            <option>hydra</option>
            <option>octopus</option>
        </select>
        level
        <select id="level" title="the level of the boss you want to attack">
            <option class="defaultOption">level</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
            <option>7</option>
            <option>8</option>
            <option>9</option>
            <option>10</option>
        </select>
        with
        <select id="unit" title="the troop type you want to send to attack this boss">
            <option class="defaultOption">unit</option>
            <option class="landUnit">berserkers</option>
            <option class="landUnit">rangers</option>
            <option class="landUnit">guardians</option>
            <option class="landUnit">crossbowmen</option>
            <option class="landUnit">knights</option>
            <option class="landUnit">mages</option>
            <option class="landUnit">warlocks</option>
            <option class="landUnit">templars</option>
            <option class="landUnit">paladins</option>
            <option class="seaUnit">sloops</option>
            <option class="seaUnit">frigates</option>
            <option class="seaUnit">war galleons</option>
        </select>
        .
        <br />
        i researched
        <input type="text" title="the attack/defend bonus you get from research, and alliance faith, make sure to put in precents, not levels" id="researchBonus" value="0" />% attack bonus for the <span class="researchedUnit">
        unit</span>.
    </p>
    <button id="answer" title="keep in mind that to get max loot back, you will need to send more troops!">
        how many units will i need?</button>
    <div id="output">
        <span id="guaranteed"></span>
        <br />
        <span id="seventyFive"></span>
        <br />
        <span id="fifty"></span>
        <br />
        <span id="twentyFive"></span>
    </div>
    <img id="peg"src="http://prodcdnweb.lordofultima.com/en/static/1268913449/images/registration/box_bg.png">
    <button id="mixed">mixed troops calculator</button>
    <button id="accessibility" class="bottomButtons" title="removes the color and shadows from the answer">disable bright colors</button>
</div>

<div id="mixedTroopsCalculator">
    using the boss raids calculator and your availible troops, fill in the blanks below (make sure to choose the type of the troop in the boss raids calculator for it log correctly) the calculator will help you add up all the units until you have enough troops to send at the boss.<br><br>
        I have <input id="availibleTroops" type="text" value="0"/> out of <input id="requiredTroops" type="text" value="0"/> <span class="researchedUnit">
        units</span> I need to send at the <span id="killedBoss">boss</span>.
    
        <br>
        <button id="mixedTroopsCalculate">add troops</button>
        <br>
        taking in account:
        <div id="addedTroops"></div>
        
        you have <span id="precentageOfDone">0</span>% of the required troops.
    <button id="clear">clear</button>
        <br>
    <button id="close">X</button>
</div>
img {display:none;}
body
{
    background: black;
}
h1
{
    font: 40px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 400px;
    text-align: center;
    margin-left: 125px;
    margin-top: 25px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    text-transform: capitalize;
}
#i
{
    font: 14px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 630px;
    text-align: center;
    margin: 0px 10px 0px 10px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    text-transform: capitalize;
}
p
{
    font: 14px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 580px;
    margin: 20px 25px 0px 25px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    padding: 10px;
}
select
{
    background: #C6B9A5;
    font: 14px "Trebuchet MS" , sans-serif;
    border: none;
    border-bottom: 1px dashed black;
}
input
{
    width: 30px;
    background: #C6B9A5;
    font: 14px "Trebuchet MS" , sans-serif;
    border: none;
    border-bottom: 1px dashed black;
}
button
{
    background: #C6B9A5;
    font: 18px "Trebuchet MS" , sans-serif;
    width: 250px;
    height: 50px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border-color: gray;
    margin: 5px 0px 0px 200px;
}
#output
{
    font: 20px "Trebuchet MS" , sans-serif;
    background: #C6B9A5;
    width: 580px;
    height:100px;
    margin: 6px 25px 0px 25px;
    border-radius: 8px;
    box-shadow: inset 0px 0px 8px black;
    border: 1px solid black;
    padding: 10px;
    text-shadow: 0px 0px 3px black;
}
#guaranteed
{
    color: green;
}
#seventyFive
{
    color: yellow;
}
#fifty
{
    color: orange;
}
#twentyFive
{
    color: red;
}
#wrapper
{
    position: relative;
    margin: 0 auto;
    width: 650px;
    height: 500px;
    border: 1px solid black;
}
#peg
{
    display:block;
    z-index: -1;
    position: absolute;
    top: 0px;
    width: 650px;
    height: 500px;
}
#accessibility
{
    position:absolute;
    bottom:0px;
    right:0px;
    font: 9px "Trebuchet MS" , sans-serif;
    width: 120px;
    height: 20px;
}
iframe {position:absolute;
    top:40px;
}

#likieLike{position:absolute;
    top:10px;
    background:#C6B9A5;
    border-radius:8px;
    border 1px solid black;
    box-shadow:inset 0px 0px 4px black;
    width:130px;
    padding:5px;
    opacity:0.5;}
#likieLike:hover {opacity:1;}
#requiredTroops, #availibleTroops {width:70px;}
#mixedTroopsCalculate {height:30px;
width:auto;}
#mixedTroopsCalculator {background:#C6B9A5;
    border-radius:8px;
    border 1px solid black;
    box-shadow:inset 0px 0px 4px black;
position:relative;
    top:-70px;
    
padding:20px;}
#clear {width:auto;
    height:auto;
    margin:10px;
font-size:10px;}
#close {position:absolute;
    right:5px;
    top:5px;
    width:auto;
    height:auto;
    font-size:10px;
    color:red;}