Тег Script работает внутри тела, но не работает снаружи

Привет, я сделал веб-страницу, которая использует модальный режим для отображения вывода, я столкнулся со сценарием, в котором я помещал свои теги сценария внутри тела, и программа работала плавно, однако, когда я чистил свои коды и помещал теги сценария вне тела . некоторые части перестают функционировать, вот мой код, был бы признателен, если бы вы помогли мне его отладить. вот скрипка: 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>

person Mr. Fox    schedule 10.02.2014    source источник


Ответы (2)


Попробуйте написать свой код в $(document).ready(), чтобы вы DOM были готовы к использованию, иначе может не работать

Попробуйте, как,

$(function(){
   // your js code
});
person Rohan Kumar    schedule 10.02.2014
comment
Почти во всех случаях должно работать простое размещение ваших скриптов прямо перед закрывающим тегом ‹/body›... DOM должен быть загружен к этому моменту... в любом случае рад, что у вас все заработало :) - person Matt Browne; 10.02.2014

Просто оставьте скрипт-тег внутри тела, и все будет работать нормально.

Если вы хотите очистить HTML-файл, поместите свой код Javascript во внешний JS-файл и загрузите его в конце вашего тела с помощью:

    <script type="text/javascript" src="main.js"></script>
</body>
person dominikus    schedule 10.02.2014
comment
Однако это не решает вопрос. - person reergymerej; 10.02.2014