2

私は JavaScript プログラミングにまったく慣れていないので、Web サイトの 1 つを維持する時間を節約するためのスクリプトを作成しようとしています。

現在、ドキュメントの先頭から呼び出している同じスクリプトに 2 つの関数があり、onload イベント ハンドラーを使用して両方を同時にロードしようとしています。スクリプトで window.onload コマンドを使用してそれを行っています (スクリプトをできるだけ目立たないようにしたいので、ヘッダーでスクリプトを呼び出すだけです)。問題は、最初の関数だけがロードされ、2 番目の関数がロードされないことです。両方の関数を次のように呼び出すことができます:

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

または、これを達成するために使用する必要がある別のコードがありますか?

私はJavaScriptとプログラミング全般に非常に慣れていないため、説明をできるだけ簡単にしていただければ幸いです。

PS onload で複数の関数をロードできない場合は、理由を説明していただけないでしょうか。後でわかります。

わかりました、私の質問はおそらく仮定のために残されすぎていることがわかりました。ここに私が呼び出そうとしている関数のコード全体があります（これは私がhtmlドキュメントの頭で呼び出しているスクリプトです）：

私の変数はセルビア語で書かれているため (私はセルビア出身です)、コードをここに置くことは避けようとしていましたが、あまり混乱することなく参照できることを願っています。

以下のコードでは、スクリプトの最後で 2 つの関数 (lista() と ostale()) を呼び出しています。moveover() 関数は、lista() 関数によって呼び出される単なるヘルパー関数です。本質的に、最初のもの (lista()) は div "boje" (英語では "colors" に翻訳されます) のすべての要素を一覧表示し、ユーザーがマウスを置いた色に応じて、背景画像が変化します。また、ユーザーがホバーすることになっている画像要素にいくつかの属性を追加します。2 番目のもの (ostale() (英語の「その他」に翻訳)) は、ユーザーがそれらの上にカーソルを置いた場合に何もしないはずの残りのカラー画像にのみ属性を追加することになっています。しかし、ローカルホストでページを開くと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 は関数ではありません」というエラーが表示されます。

これは、私が操作しようとしている 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

はい、できます。ただし、最初がうまくいかない場合、2 番目は起動しません。

これを使用してエラーをキャッチします。

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 に答える
1

両方の関数を呼び出すことができますか

はい。DOM プロパティに割り当ててイベント ハンドラーを追加する場合、それぞれに 1 つの関数しか割り当てることができませんが、その関数は他の関数を呼び出すことができます。

ただし、それを行って最初の関数がエラーをスローした場合、2 番目の関数はまったく起動しません。また、呼び出された関数に渡されないため、コンテキストと引数も破棄されます。

これらの問題は次のように回避できます。

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

または、これを達成するために使用する必要がある別のコードがありますか?

addEventListener代わりに使用する必要があります。これにより、適用をいじる必要がなくなり、エラーがスローされるのを防ぐことができます。詳細については、MDN イベントのドキュメントを参照してください。

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