Question

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

现在我在同一个脚本中有两个函数，我从文档的头部调用，我试图让它们同时加载onload事件处理程序。我在我的脚本中使用window.onload命令（我想让我的脚本尽可能不引人注意，所以我只是在标题中调用脚本）。问题是只有第一个函数加载而第二个函数没有加载。可以使用以下方法调用这两个函数：

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

或者我需要使用不同的代码来完成此任务吗？

如果您能够尽可能简单地解释，我会非常感激，因为我对JavaScript和编程一般都不熟悉。

P.S。如果多个函数无法加载onload，请你解释为什么会出现这种情况，以便将来知道。

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

我试图避免将代码放在这里，因为我的变量是用塞尔维亚语写的（因为我来自塞尔维亚），但我希望你仍然可以毫不费力地浏览它。

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

function lista()
{
var boje = document.getElementById('boje');
var broj = boje.childNodes.length;
for(i=1; i<broj; i++)
{
    var stavka = boje.childNodes.item(i);
    stavka.setAttribute("id", i);
    stavka.setAttribute("onmouseover", "moveover(src)");
    stavka.setAttribute("alt", "Boja");
    stavka.setAttribute("class", "boja");
    stavka.hspace="2";
    stavka.height="23";
}
}

function moveover(adresaBoje)
{
var izvor = adresaBoje;
var slika = izvor.slice(0, izvor.length-4);
var pocetak = "url(";
var ekstenzija = ".jpg)";
var novaSlika = pocetak.concat(slika, ekstenzija);
document.getElementById('slika').style.backgroundImage=novaSlika;
}

function ostalo(){
var ostaleboje = document.getElementById('ostale');
var ostalebroj = ostaleboje.childNodes.length;
for(n=1; n<ostalebroj; n++)
{
    var ostalestavka = ostaleboje.childNodes.item(n);
    ostalestavka.setAttribute("alt", "Boja");
    ostalestavka.hspace="2";
    ostalestavka.height="23";
}
}

window.onload=function(){
try
{
lista();
ostalo();
}
catch(err)
{
alert(err);
}
}

在我尝试加载页面后，它会提示我一个错误：“TypeError：stavka.setAttribute不是函数”。

这是我试图操纵的html文档：

<div id="slika" style="background-image: url(images/nova_brilliant/1.jpg)">
</div>

<div id="tekst">

<h1>Nova Brilliant</h1>

<div id="sadrzaj">
<p>Pre&#273;ite mi&#353;em preko &#382;eljene boje da biste videli kako izgleda ova kuhinja u toj boji:</p>
<div id="boje">
<img src="images/nova_brilliant/1.gif"><img src="images/nova_brilliant/2.gif"><img src="images/nova_brilliant/3.gif">
</div>
<p>Ostale dostupne boje:</p>
<div id="ostale">
<img src="images/nova_brilliant/4.gif"><img src="images/nova_brilliant/5.gif"><img src="images/nova_brilliant/6.gif">
</div>
</div>

</div>

Answer 1

我遇到了同样的问题。我遇到了一些帮助，但这个很容易理解，对我有用：

window.addEventListener("load", func1); window.addEventListener("load", func2);

就像@Quentin你可以阅读更多相关信息here

Answer 2

可以使用
调用这两个函数

是。如果通过分配DOM属性来添加事件处理程序，那么您只能为每个属性分配一个函数，但该函数可以调用其他函数。

但是，如果你这样做并且第一个函数抛出错误，那么第二个函数根本不会触发。它还会丢弃上下文和参数，因为它们不会传递给被调用的函数。

你可以解决这些问题：

window.onload=function(){
  try {
    function1.apply(this, arguments);
  } catch (e) { }
  try {
    function2.apply(this, arguments);
  } catch (e) { }
}

或者我需要使用不同的代码来完成此任务吗？

您应该使用addEventListener代替。这样可以避免使用apply，并保护您免受错误抛出。有关详细信息，请参阅MDN events documentation。

window.addEventListener('load', function1);
window.addEventListener('load', function2);

Answer 3

是的，你可以。但是，如果第一次出错，第二次就不会发射。

用它来捕捉错误：

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>

更新：我发现错误： 实际上你的代码没有任何问题。它工作得很好，但是，boje的最后一项是空格，这意味着一个文本节点。这就是错误不断出现的原因。使用for(i=1; i<broj; i++)更改for(i=1; i<broj-1; i++)，一切都会很好。

JavaScript两个onload函数

3 个答案: