Script tag works inside the body but doesn't work outside

Question

Hi I made a webpage that uses modal to display the output, I came in a scenario where in I put my script tags inside the body and the program work out fin, however when I was cleaning my codes and put the script tags outside the body. some parts cease to function, here's my code would appreciate it if you could help me debug it. here's a fiddle: http://jsfiddle.net/6x63w/

<div class="infobox">
    <div id="shade"></div>
    <div id="modal">
        <div id="envholder">

            <img src="placeholder.png" id="placeholderImg" style="display: none;" />
            <input type="button" value="Close" id='close2'>
        </div>
    </div> <span class="infohead"><a href="http://ojt.cloudstaff.com/Project9/" id="find-post-code">Address Format</a></span>

    <div id="WC"><span class="infoques">Which Country?</span>

        <form action="" method="get">
            <select name="code" id="code">
                <option value="Aland Islands">Åland Islands</option>
                <option value="Albania">Albania</option>
                <option value="American Samoa">American Samoa</option>
                <option value="Andorra">Andorra</option>
                <option value="Antigua and Barbuda">Antigua and Barbuda</option>
                <option value="Argentina">Argentina</option>
                <option value="Armenia">Armenia</option>
                <option value="Australia">Australia</option>
                <option value="Austria">Austria</option>
                <option value="Azerbaijan">Azerbaijan</option>
                <option value="Belarus">Belarus</option>
                <option value="Belgium">Belgium</option>
                <option value="Bermuda">Bermuda</option>
                <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
                <option value="Brunei Darussalam">Brunei Darussalam</option>
                <option value="Bulgaria">Bulgaria</option>
                <option value="Canada">Canada</option>
                <option value="Cayman Islands">Cayman Islands</option>
                <option value="Chile">Chile</option>
                <option value="China">China</option>
                <option value="Croatia">Croatia</option>
                <option value="Cyprus">Cyprus</option>
                <option value="Czech Republic">Czech Republic</option>
                <option value="Denmark">Denmark</option>
                <option value="Dominican Republic">Dominican Republic</option>
                <option value="Ecuador">Ecuador</option>
                <option value="Estonia">Estonia</option>
                <option value="Faroe Islands">Faroe Islands</option>
                <option value="Finland">Finland</option>
                <option value="France">France</option>
                <option value="French Guiana">French Guiana</option>
                <option value="French Polynesia">French Polynesia</option>
                <option value="Germany">Germany</option>
                <option value="Greece">Greece</option>
                <option value="Greenland">Greenland</option>
                <option value="Guadeloupe">Guadeloupe</option>
                <option value="Guam">Guam</option>
                <option value="Guatemala">Guatemala</option>
                <option value="Holy See">Holy See</option>
                <option value="Hong Kong">Hong Kong</option>
                <option value="Hungary">Hungary</option>
                <option value="Iceland">Iceland</option>
                <option value="India">India</option>
                <option value="Ireland">Ireland</option>
                <option value="Isle of Man">Isle of Man</option>
                <option value="Italy">Italy</option>
                <option value="Jamaica">Jamaica</option>
                <option value="Japan">Japan</option>
                <option value="Jordan">Jordan</option>
                <option value="Kazakhstan">Kazakhstan</option>
                <option value="Kenya">Kenya</option>
                <option value="Latvia">Latvia</option>
                <option value="Lesotho">Lesotho</option>
                <option value="Liechtenstein">Liechtenstein</option>
                <option value="Lithuania">Lithuania</option>
                <option value="Luxembourg">Luxembourg</option>
                <option value="Macedonia, The Former Yugoslav Republic of">Macedonia</option>
                <option value="Madagascar">Madagascar</option>
                <option value="Malaysia">Malaysia</option>
                <option value="Maldives">Maldives</option>
                <option value="Marshall Islands">Marshall Islands</option>
                <option value="Martinique">Martinique</option>
                <option value="Mayotte">Mayotte</option>
                <option value="Mexico">Mexico</option>
                <option value="Micronesia, Federated States of">Micronesia</option>
                <option value="Moldova">Moldova</option>
                <option value="Monaco">Monaco</option>
                <option value="Mozambique">Mozambique</option>
                <option value="Nauru">Nauru</option>
                <option value="Nepal">Nepal</option>
                <option value="Netherlands">Netherlands</option>
                <option value="New Caledonia">New Caledonia</option>
                <option value="New Zealand">New Zealand</option>
                <option value="Norfolk Island">Norfolk Island</option>
                <option value="Northern Mariana Islands">Northern Mariana Islands</option>
                <option value="Norway">Norway</option>
                <option value="Pakistan">Pakistan</option>
                <option value="Palau">Palau</option>
                <option value="Panama">Panama</option>
                <option value="Papua New Guinea">Papua New Guinea</option>
                <option value="Paraguay">Paraguay</option>
                <option value="Philippines">Philippines</option>
                <option value="Pitcairn">Pitcairn</option>
                <option value="Poland">Poland</option>
                <option value="Portugal">Portugal</option>
                <option value="Puerto Rico">Puerto Rico</option>
                <option value="Reunion">Reunion</option>
                <option value="Romania">Romania</option>
                <option value="Russian Federation">Russian Federation</option>
                <option value="Saint Barthelemy">Saint Barthelemy</option>
                <option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
                <option value="Saint Martin">Saint Martin</option>
                <option value="San Marino">San Marino</option>
                <option value="Singapore">Singapore</option>
                <option value="Slovakia">Slovakia</option>
                <option value="Slovenia">Slovenia</option>
                <option value="South Africa">South Africa</option>
                <option value="Spain">Spain</option>
                <option value="Sri Lanka">Sri Lanka</option>
                <option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
                <option value="Swaziland">Swaziland</option>
                <option value="Sweden">Sweden</option>
                <option value="Switzerland">Switzerland</option>
                <option value="Turkey">Turkey</option>
                <option value="Tuvalu">Tuvalu</option>
                <option value="Uganda">Uganda</option>
                <option value="Ukraine">Ukraine</option>
                <option value="United Arab Emirates">United Arab Emirates</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="United States">United States</option>
                <option value="Uruguay">Uruguay</option>
                <option value="Venezuela">Venezuela</option>
                <option value="Virgin Islands, U.S.">Virgin Islands, U.S.</option>
                <option value="Wallis and Futuna">Wallis and Futuna</option>
            </select>
            <input type="button" id="start" value="Show Address Format" class="button">
    </div>
    <script type="text/javascript">
        var modal = document.getElementById('modal');
        var shade = document.getElementById('shade');
        document.getElementById('start').onclick = function() {
            var q = document.getElementById("code");
            var selected = q.options[q.selectedIndex].value;

            var src = "img2/" + selected + ".jpg";
            var img = document.getElementById("placeholderImg");
            img.src = src;
            img.style.display = "inline";
            modal.style.display = shade.style.display = 'block';
        };

        document.getElementById('close2').onclick = function() {
            modal.style.display = shade.style.display = 'none';
        };

    </script>
    </form>
</div>

Answer 1

Try to write you code in $(document).ready() so that you DOM is ready to use, otherwise it may not work

Try it like,

$(function(){
   // your js code
});

Answer 2

Just leave the script-tag within the body and everything will work fine.

If you want to clean up the HTML-file put your Javascript code into an external JS-file and load it at the end of your body with:

    <script type="text/javascript" src="main.js"></script>
</body>