Почему этот фрагмент кода JavaScript не работает, когда он находится внутри <head>, но работает, когда он находится внизу <body> - PullRequest
Новая
       0

Почему этот фрагмент кода JavaScript не работает, когда он находится внутри <head>, но работает, когда он находится внизу <body>

0 голосов
/ 25 августа 2011

Я пытался написать эту простую программу на JavaScript, которая меняет цвет фона при нажатии кнопки.

Когда я помещаю этот JS-код в теги 'head', он НЕ работает, но когда я помещаю его в тег 'body', он работает. (При размещении внутри корпуса я убрал window.onload) 

<script>
window.onload = function(){
var para = document.getElementById("para");

function togglecolor(){
    if(para.className != "yellow") para.className = "yellow";
    else para.className = "notYellow";
}
}
</script>

Вот HTML: 

<h1 id="para" class="">Hello World! </h1>
<button onClick="togglecolor();">Press Me</button>

Я не могу понять, почему это не работает, когда места внутри "головы".

Ответы [ 5 ]

1 голос
/ 25 августа 2011

Это проблема масштаба.Вы определяете свою функцию в другой функции.Это означает, что он доступен только внутри этой функции.Переместите его наружу, и все должно работать. 

<script>
function togglecolor(){
    var para = document.getElementById("para");
    if(para.className != "yellow") para.className = "yellow";
    else para.className = "notYellow";
}
</script>
0 голосов
/ 25 августа 2011

http://sandbox.phpcode.eu/g/ea6d3/3

работает.изменить window.onload на $(function(){

<html>
<body>
<style>
.yellow {color:yellow;}
.notYellow {color:blue;}
</style>
<script>
function togglecolor(){
        var para = document.getElementById("para");
        if(para.className != "yellow") 
             para.className = "yellow";
        else para.className = "notYellow";
}

</script>
</head>
<body>
<h1 id="para" class="notYellow">Hello World! </h1>
<button onClick="togglecolor();">Press Me</button>
</body>
</html>
0 голосов
/ 25 августа 2011

Причина, вероятно, в том, что вы разместили скрипт.Когда скрипт загружен, он запускается в этот момент;следовательно, если у вас есть html-файл, подобный следующему: 

 <html>
   <head />
   <body>
     <script />
     <h1 />
     <button />
   </body>
 </html>

Файл сценария будет запущен, тогда остальная часть страницы продолжит загружаться.Поскольку у вас есть присвоение para, происходящее вне контекста вашей функции togglecolor, оно получает его значение при загрузке;потенциально до того, как фактический элемент HTML был загружен.

0 голосов
/ 25 августа 2011

Я думаю, причина в том, что вы определили toggleColor метод внутри window загрузчик событий.Попробуйте переместить это и попробуйте поместить код в голову. 

<script>
function togglecolor(){
    var para = document.getElementById("para")
    if(para.className != "yellow") 
        para.className = "yellow";
    else 
        para.className = "notYellow";
}
window.onload = togglecolor;
</script>
0 голосов
/ 25 августа 2011

Возможно, из-за того, что тег h1 с id = "para" еще не загружен, когда был выполнен javascript

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...