JavaScript两个onload函数_Javascript_Html_Function_Dom_Onload

JavaScript两个onload函数

javascript html function dom

JavaScript两个onload函数,javascript,html,function,dom,onload,Javascript,Html,Function,Dom,Onload,我对JavaScript编程非常陌生，我正在尝试创建一些脚本，以节省我维护一个网站的时间现在，我在同一个脚本中有两个函数，我从文档的开头调用它们，并尝试使用onload事件处理程序同时加载它们。我在脚本中使用window.onload命令来实现这一点（我希望使脚本尽可能不引人注目，所以我只是在标题中调用脚本）。问题是只有第一个函数加载，而第二个函数不加载。这两个函数都可以通过以下方式调用： window.onload=function(){ function1(); function2();

我对JavaScript编程非常陌生，我正在尝试创建一些脚本，以节省我维护一个网站的时间

现在，我在同一个脚本中有两个函数，我从文档的开头调用它们，并尝试使用onload事件处理程序同时加载它们。我在脚本中使用window.onload命令来实现这一点（我希望使脚本尽可能不引人注目，所以我只是在标题中调用脚本）。问题是只有第一个函数加载，而第二个函数不加载。这两个函数都可以通过以下方式调用：

window.onload=function(){
function1();
function2();
}

或者我需要使用不同的代码来实现这一点

如果您能尽可能简单地解释一下，我将不胜感激，因为我对JavaScript和编程都是新手

另外，如果onload不能加载多个函数，请您向我解释为什么会出现这种情况，以便我将来知道

好的，我从答案中看到，我的问题可能留下了太多的假设，所以这里是我试图调用的函数的全部代码（这是我在html文档头部调用的脚本）：

我试图避免将代码放在这里，因为我的变量是用塞尔维亚语编写的（因为我来自塞尔维亚），但我希望您仍然能够在没有太多混淆的情况下查看它

在下面的代码中，我在脚本底部调用了两个函数（lista（）和ostale（）），moveover（）函数只是lista（）函数调用的一个辅助函数。本质上，第一个（lista（））通过div“boje”（英文翻译为“colors”）的所有元素列出，并且根据用户鼠标悬停的颜色，背景图像会发生变化。它还为用户应该悬停在上面的图像元素添加了一些属性。第二个（ostale（）（翻译成英语“others”）应该只为其余的彩色图像添加属性，如果用户将鼠标悬停在这些图像上，这些图像不应该做任何事情。但是当我在localhost中打开页面时，Firefox的inspect元素中没有显示任何属性已经添加到div“ostale”中的图像中

函数lista（）
{
var boje=document.getElementById（'boje'）；
var broj=boje.childNodes.length；
对于（i=1；i
这两个函数都可以用
是的。如果通过分配给DOM属性来添加事件处理程序，则只能为每个属性分配一个函数，但该函数可以调用其他函数
但是，如果您这样做，并且第一个函数抛出错误，那么第二个函数将不会触发。它还将丢弃上下文和参数，因为它们不会传递给被调用的函数
您可以这样解决这些问题：
window.onload=function(){
  try {
    function1.apply(this, arguments);
  } catch (e) { }
  try {
    function2.apply(this, arguments);
  } catch (e) { }
}

或者我需要使用不同的代码来实现这一点
您应该改用addEventListener
。这样可以避免对apply进行修改，并防止抛出错误。有关详细信息，请参阅
window.addEventListener('load', function1);
window.addEventListener('load', function2);

这两个函数都可以用
是的。如果通过分配给DOM属性来添加事件处理程序，则只能为每个属性分配一个函数，但该函数可以调用其他函数
但是，如果您这样做，并且第一个函数抛出错误，那么第二个函数将不会触发。它还将丢弃上下文和参数，因为它们不会传递给被调用的函数
您可以这样解决这些问题：
window.onload=function(){
  try {
    function1.apply(this, arguments);
  } catch (e) { }
  try {
    function2.apply(this, arguments);
  } catch (e) { }
}

或者我需要使用不同的代码来实现这一点
您应该改用addEventListener
。这样可以避免对apply进行修改，并防止抛出错误。有关详细信息，请参阅
window.addEventListener('load', function1);
window.addEventListener('load', function2);

是的，你可以。但是，如果第一个出错，第二个就不会开火
使用此选项捕获错误：
try { //try executing the functions
  function1();
  function2();
}
catch(error) { // If there's an error
  alert(error); // alert the error.
}

在使用javascript进行实验时，放置try
和catch
是一种很好的做法
已编辑：抱歉，我将childNodes[]与childNodes.item（）混淆了。
顺便说一下，我试过这样的方法，效果很好：
<head>
<script>

window.onload = function() {
div = document.getElementById("someDiv");
length = div.childNodes.length;
    first();
    second();
}
function first() {
    for(var i=0;i<length;i++)   {
        var set = div.childNodes.item(i);
        set.setAttribute("name", "span " + (i+1));
    }     
}
function second() {
    for(var i=0;i<length;i++)   {
        name = div.childNodes[i].getAttribute("name");
        console.log(name);
    }
}
</script>
</head>
<body>
<div id='someDiv'><span id='span1'></span><span id='span2'></span></div>
</body>


window.onload=函数（）{
div=document.getElementById（“someDiv”）；
长度=div.childNodes.length；
第一个（）；
第二个（）；
}
函数优先（）{
对于（var i=0；i是的，您可以。但是，如果第一个错误，第二个不会触发
使用此选项捕获错误：
try { //try executing the functions
  function1();
  function2();
}
catch(error) { // If there's an error
  alert(error); // alert the error.
}

在使用javascript进行实验时，放置try
和catch
是一种很好的做法
已编辑：抱歉，我将childNodes[]与childNodes.item（）混淆了。
顺便说一下，我试过这样的方法，效果很好：
<head>
<script>

window.onload = function() {
div = document.getElementById("someDiv");
length = div.childNodes.length;
    first();
    second();
}
function first() {
    for(var i=0;i<length;i++)   {
        var set = div.childNodes.item(i);
        set.setAttribute("name", "span " + (i+1));
    }     
}
function second() {
    for(var i=0;i<length;i++)   {
        name = div.childNodes[i].getAttribute("name");
        console.log(name);
    }
}
</script>
</head>
<body>
<div id='someDiv'><span id='span1'></span><span id='span2'></span></div>
</body>


window.onload=函数（）{
div=document.getElementById（“someDiv”）；
长度=div.childNodes.length；
第一个（）；
第二个（）；
}
函数优先（）{
对于（var i=0；i我遇到了相同的问题。我遇到了一些帮助，但这一点很容易理解，对我来说很有效：
window.addEventListener("load", func1); window.addEventListener("load", func2);

就像@Quentin一样，你可以阅读更多关于它的内容
我遇到了同样的问题。我遇到了一些帮助，但这一点很容易理解，而且对我很有效：
window.addEventListener("load", func1); window.addEventListener("load", func2);

就像@Quentin一样，您可以阅读更多关于它的内容，这些内容应该可以很好地工作。
问题还在于，从onload处理程序调用这两个函数应该可以很好地工作。很可能还有另一个问题。请尝试制作一个JSFIDLE或包含更多代码。您所说的“第二个没有（加载）”是什么意思？您是否遇到错误？请尝试通过一个逐步发出的警报（“有效？”）；
或其他方式调试您的函数。您的函数1或函数2中应该存在问题。函数1（）和函数2（）是如何工作的看起来怎么样？应该可以。应该可以正常工作…问题还在于从onload处理程序调用这两个函数应该可以正常工作。很可能还有另一个问题。尝试制作JSFIDLE或包含更多代码。你说的“第二个”是什么意思