положение тега сценария влияет на выполнение кода

-4

Когда я объявляю сценарий тег в head тег мой код не работает, например:положение тега сценария влияет на выполнение кода

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
    <script type="text/javascript" src="jquery-1.11.2.js" async></script> 
    <script type="text/javascript" src="skript.js" async></script> 
</head> 
<body> 
    <p> 
    Click "Try it" to execute the displayDate() function. 
    </p> 
    <button id="myBtn"> 
    Try it 
    </button> 
    <p id="demo"></p> 
</body> 
</html>

но когда я установить тег сценария в нижней body тэга работ, например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>Untitled Document</title> 
</head> 
<body> 
    <p> 
    Click "Try it" to execute the displayDate() function. 
    </p> 
    <button id="myBtn"> 
    Try it 
    </button> 
    <p id="demo"></p> 
    <script type="text/javascript" src="jquery-1.11.2.js" async></script> 
    <script type="text/javascript" src="skript.js" async></script> 
</body> 
</html>

Skript файл, содержащий следующие:

document.getElementById("myBtn").onclick = function(){displayDate()}; 

function displayDate() { 
    document.getElementById("demo").innerHTML = Date(); 
}

У кого-то есть точный ответ, почему это происходит?

источник

2015-01-18 codemonkey

ПОСЛЕ того, что вы ссылаетесь на элемент до его существования, когда он находится в голове. – epascarello

http://learn.jquery.com/using-jquery-core/document-ready/ проверьте это для дальнейшего объяснения. – Craicerjack

Итак, если я ссылаюсь на тег в скрипте, тег сценария должен быть после тега, на который ссылается скрипт? – codemonkey

Сценарии всегда должны быть загружены наконец и в нижней части корпуса, чтобы они могли получить доступ к DOM и элементам.

Вы можете обернуть это вокруг вашего кода, так что выполняется, когда eversthing загружается

document.addEventListener("DOMContentLoaded", function() { 
    // your code 
});

или

document.attachEvent("onreadystatechange", function(){ 
    if (document.readyState === "complete"){ 
    document.detachEvent("onreadystatechange", arguments.callee); 
    // your code 
    } 
});

увидеть официальный исходный код из JQuery готового события здесь: https://github.com/jquery/jquery/blob/master/src/core/ready.js#L81

он вызывает завершенный() - метод, когда страница полностью загружена

https://stackoverflow.com/a/21814964/753676 и How can I detect DOM ready and add a class without jQuery? дают те же ответы

источник

2015-01-18 21:37:16

Мне любопытно, часто ли это используется на практике? Как насчет этого подхода, это также работает: document.getElementById («myBtn»). AddEventListener («onclick», displayDate, false); document.getElementById ("myBtn"). Onclick = function() {displayDate()}; функция displayDate() { \t document.getElementById ("demo"). InnerHTML = Date(); } – codemonkey

Почему в этом примере не добавлено событие onclick во втором выражении? – codemonkey

, потому что второй оператор работает только при доступе к DOM и элементу. Первый оператор добавляет событие, когда элемент доступен http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick –

Сценарий выполняется до создания дерева DOM. Поэтому, если вы добавляете скрипт в голову, функция выполняется до создания дерева DOM. Если вы хотите добавить скрипт в голову, вызовите функцию в загрузке окна.

источник

2015-01-18 21:38:32 edonbajrami

Вы должны считать тег сценария тегом включения контента. То, что вы делаете в первом коде, - это включить контент (скрипт), которому нужны данные, которые появляются после его введения.

Более того, вы должны иметь в виду, что DOM (программное представление вашего HTML) требует определенного времени для формирования, поэтому вам нужно, чтобы это было выполнено. Есть несколько способов подождать в соответствии с приведенными выше ответами.

источник

2015-01-18 21:40:27

положение тега сценария влияет на выполнение кода

ответ

Смежные вопросы