2

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

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

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

还是我需要使用其他代码来完成此操作？

如果您能尽可能简单地解释一下，我将不胜感激，因为我对 JavaScript 和一般编程非常陌生。

PS如果onload无法加载多个功能，请您向我解释为什么会这样，以便我将来知道。

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

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

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

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 is not a function”。

这是我试图操作的 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>
4

3 回答 3

2

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

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

就像@Quentin 你可以在这里阅读更多关于它的信息

于 2015-02-02T15:10:11.293 回答
1

两个函数都可以调用吗

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

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

您可以像这样解决这些问题：

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

还是我需要使用其他代码来完成此操作？

你应该addEventListener改用。这避免了摆弄 apply 的需要，并保护您免受抛出错误的影响。有关更多详细信息，请参阅MDN 事件文档。

window.addEventListener('load', function1);
window.addEventListener('load', function2);
于 2013-03-28T14:18:26.470 回答
1

是的你可以。但是，如果第一个出错，第二个不会触发。

使用它来捕获错误：

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++)一切都应该很好。

于 2013-03-28T14:52:35.957 回答