私はそれを別の js ファイルに書き、読み込みの問題を防ぐために window.onload=function(){} を使用しました
1. 本体からコードを直接挿入すると機能します;
2. コードの挿入からjs ファイルを本文に追加しても機能しません; ファイルから window.onload=function(){} を削除すると機能します;
3. ヘッドに記述した場合、コードを直接挿入してもファイルを直接挿入しても機能しません;
4. コンソールではエラーが報告されず、デバッガーで js ファイルが見つかります。
ページの読み込みに問題があると思いますが、具体的に何が問題なのかわかりません。 。 。
コードを投稿してください
jsコードはこんな感じです
リーリー
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
まず最初に提案したいのは、ファイル名には漢字を含めないこと、また通常は数字で始めないことです。命名基準はたくさんありますので、自分で調べてください。
質問について:
控制台没报错且能在调试器中找到这个js文件：只要你使用了window.onload=function(){}、jsコードはheadに入れてもbodyに入れても、ファイル形式で導入しても必ず実行されます。从body里插入js文件，不能用；文件中删掉window.onload=function(){}，能用：html中的onclick="showPic(this)"，这个showPic函数是定义在全局作用域下面的，不能用window.onload包裹，当你包裹的时候，showPic的作用域就处于onload这个函数里面了，在全局作用域下找不到showPic，所以点击时，showPic函数里面的代码没有执行、他の js コードが実行されると、a タグ、onclick などのコードが追加されています。写在head里，无论直接插入代码还是文件，都不能用: dom クエリに関しては、dom ツリーがまだ構築されていないため、a タグをクエリすることはできません。 head に記述された DOM クエリ js コードは window.onload でラップする必要がありますが、正常に実行できるように showPic 関数を抽出してグローバル スコープに配置する必要があります。@张东东 答えは正しいですが、彼は element.onclick バインディング イベント メソッド (コメントアウトしたコード) を使用しました。この時点で、showPic 関数はスコープ チェーン内にあるため、実行できます。
@stephenhuang onload で書かれた showPic コードは実行できますか?
スクリプトは本文の下に配置する必要があります
リーリー最初に知っておくべきことは次のとおりです:
HTML ファイルはトップダウンで実行されますが、導入された CSS と JavaScript の順序は異なります。CSS が導入されて読み込まれると、プログラムは依然として下方向に実行され、<script> スクリプトが実行されると、スレッドは中断され、待機中です。 プログラムは、スクリプトの実行が完了した後にのみ実行を継続します。
そのため、オンラインでの議論のほとんどは、スクリプト スクリプトを <body> の後に配置することで、スクリプト スクリプトの実行時間が長くなって DOM の生成が遅延したりブロックされたりすることがなくなり、ページの読み込み速度が向上するというものです。 。
ただし、一部のページ効果の実装には、事前にいくつかの JS スクリプトを動的に読み込む必要があるため、すべてのスクリプトを本文の後に置くことはできません。したがって、これらのスクリプトは <body> の前に配置する必要があります。
ということで、スクリプト配置の原則は「ページエフェクト実装クラスのjsは本文の前に配置し、アクション、インタラクション、イベントドリブンのjsは本文の後に配置できる」ということになると思います。
これは、js タグが見つかったときに head に配置され、js がダウンロードされるためです。dom のレンダリングはまだ完了しておらず、この時点では js は dom 要素を取得できません。
まず、スクリプトはheadに配置することができ、多くのWebサイトがこの方法で使用しています。たとえば、ページを開いたときに、それが携帯電話かPC JSメソッドであるかを判断する必要があります。
次に、あなたの問題に応えて、少し変更を加えたので、テストを実行できるようになりました。 js部分のみが変更されており、html部分は変更されていません。
window.onload=function(){
リーリー}
つまり、js コードが間違って書かれている可能性があります。
本当にありがとう、何が起こっているのかやっと理解できました！この提案は非常に有益だったので、受け入れました。
リーリーうっかり回答欄に書いてしまいましたが、せっかく書いたので、役に立つことを書いてコードを数行追加しましょう
Let lis[i].setAttribute('onclick','showPic(this);return false;' ); 次のように書くこともできます: