1

私はこのJavascriptを持っていますが、うまくいきません。私はすでにJSlintをチェックしましたが、それはすべてうまくいくと言っていました。それでもうまくいきません。JavaScript は HTML にはありませんが、<head>

注：私はローカルサーバーで作業しているため、ページロードはすぐに完了します。

function changeVisibility() {
    var a = document.getElementById('invisible');
    a.style.display = 'block';
}

var changed = document.getElementById('click1');
changed.onchange = changeVisibility;

これは、対応する HTML です。

<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
  <a href="javascript:addFileInput();">Attach another File</a>
</div>

入力をクリックし、ファイルを選択して承認します。次に、onchange イベントがトリガーされ、非表示の div のスタイルがブロックに設定されます。

問題は、次のエラーが発生し続けることです。

「変更は null です: changed.onchange = changeVisibility;」

私はそれを理解していません、私はここで見落としているものを真剣に理解していません。

編集：質問に答えました。Mercutio、そしてもちろん他の皆さんにも感謝します。最終的なコード:

function loadEvents() {
    var changed = document.getElementById('click1');
    var a = document.getElementById('invisible');
    document.getElementById('addField').onclick = addFileInput;

    changed.onchange = function() {
        a.style.display = 'block';
    }
}
if (document.getElementById) window.onload = loadEvents;

これは、対応する HTML です。

<input type="file" name="click[]" size="35" id="click1" />
<div id="invisible" style="display: none;">
  <a href="#">Attach another File</a>
</div>

また、JSbinへのリンクをありがとう、それについて知りませんでした。

4

5 に答える 5

8

これは、参照時にDOMオブジェクトが存在しないように聞こえます。おそらく、ドキュメントが完全にロードされたら実行するようにコードを変更します (または、ページの下部に JavaScript を配置します)。

注：私はローカルサーバーで作業しているため、ページロードはすぐに完了します。

それは問題ではありません。ドキュメントの構成部分は順番に読み込まれます。それらがどれだけ速くロードされるかは問題ではありません.いくつかのことは他のものより先に起こります:D

私が今やりたいことは、Javascript リンクを ... から削除することだけです。

そこに id を配置し、関数内で次のようにします。

document.getElementById('addField').onclick = addFileInput;

または、既に変数 'a' として div を持っているため:

a.firstChild.onclick = addFileInput;

しかし、これでは明らかに無効なアンカー タグが残ります。ベスト プラクティスでは、JavaScript を使用せずにそれを行う方法を提供し、利用可能な場合はその機能を JavaScript メソッドでオーバーライドすることをお勧めします。

于 2008-11-11T00:12:39.820 に答える
1

マキューシオは正しいです。そのコードが HEAD で実行されている場合、"document.getElementById('click1')" への呼び出しは、本文がまだ解析されていないため、常に null を返します。おそらく、そのロジックを onload イベント ハンドラー内に配置する必要があります。

于 2008-11-11T00:25:31.217 に答える
0

そうです、私はあなたの集団的な推測に基づいて物事を修正しました、そしてそれは今うまくいきます。私を悩ませているのは、アンカー内のJavascriptへの直接参照だけです

于 2008-11-11T00:33:46.877 に答える
0

コードを window.onload イベント ハンドラー、domReady イベント ハンドラー (最新の js フレームワークとライブラリのほとんどで利用可能) でラップするか、ページの下部に配置する必要があります。

ここでわかるように、ページの下部に配置しても問題なく機能します。

マークアップからイベント レスポンダーを切り離すことについては、「目立たない JavaScript」のトピックで説明されており、さまざまな方法で処理できます。通常、window.onload または document.ready イベントでイベント レスポンダーを宣言します。

于 2008-11-11T00:20:21.990 に答える
0

ファイル要素を変更しようとしているからだと思います。

通常、ブラウザではそれができません。それらを表示または非表示にする場合は、それらを div 内に配置し、それを表示または非表示にします。

于 2008-11-11T00:20:56.327 に答える