Javascript:函数不会被激发_Javascript_Jquery

Javascript:函数不会被激发

javascript jquery

Javascript:函数不会被激发,javascript,jquery,Javascript,Jquery,我有一个关于以下结构的初学者问题： <body> <p id="text_object">Some text</p> <button id="button_change_text">change text on click</button> // Individual script on page template // ---------------------------------- <script type="

我有一个关于以下结构的初学者问题：

<body>


<p id="text_object">Some text</p>

<button id="button_change_text">change text on click</button>



// Individual script on page template
// ----------------------------------
<script type="text/javascript">
   var object = $('#text_object');
   changeTextOnLoad(object);
</script>

// Footer from included footer.php with universal main.js file
// ------------------------------------------------------------
<footer>
   <script type="text/javascript" src="main.js">
</footer>

</body>

我的问题：我的控制台告诉我changeTextOnLoad（）未定义。但是点击按钮并通过这种方式更改文本效果非常好。原因何在？为什么在我的main.js文件中会触发click函数而不是changeTextOnLoad函数？

因为main.js是另一个文件，浏览器需要时间下载它。但是您运行

changeTextOnLoad（对象）在此之前。
在加载main.js文件之前调用changeTextOnLoad函数。将函数调用置于onload事件回调中，或将include置于调用之上
window.onload = function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
};
//Or using addEventListener
window.addEventListener("load",function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
});
//Or since you are using jQuery
$(document).ready(function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
});
//Or
$(function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
});

或

var object=$（“#text_object”）；
changeTextOnLoad（对象）；
因为在加载main.js文件之前调用函数，所以将main.js include放在执行changeTextOnload的脚本之前，或者将调用放在像window.onload这样的onload事件中是否可以将整个main.js放在onload事件中？我该怎么做？为什么不使用document.ready（）呢
window.onload = function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
};
//Or using addEventListener
window.addEventListener("load",function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
});
//Or since you are using jQuery
$(document).ready(function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
});
//Or
$(function(){
   var object = $('#text_object');
   changeTextOnLoad(object);
});

<script type="text/javascript" src="main.js"></script>
<script type="text/javascript">
    var object = $('#text_object');
    changeTextOnLoad(object);
</script>