リンクをクリックしても JavaScript 関数が実行されないのはなぜですか?

リンク クリックで JavaScript 関数の実行に失敗する

問題の説明

Web ページは、コンテンツを表示するためのサイドバー ナビゲーションと iframe で構成されます。ナビゲーションには、iframe のコンテンツを変更するためのリンクが含まれています。ただし、iframe のソースを変更するように設計された JavaScript 関数は機能しません。

解決策

主な問題は、onclick イベント ハンドラーで getContent 関数を実行するために必要な括弧が省略されていたことが原因でした。

その他の考慮事項

インライン イベントを避けるハンドラー

インライン イベント ハンドラー (onclick、onmouseover など) の使用は、スパゲッティ コード、コードの重複、スケーラビリティの問題、ベスト プラクティスからの逸脱につながるため、強く推奨されません。

HTML とJavaScript

読みやすさを向上させ、メンテナンスを容易にするために、HTML コードと JavaScript コードを分けてください。

ボタンのリンク ナビゲーションを無効にします

ボタンのような要素のリンクでは、その href 属性を "" ではなく # に設定して、 navigating.

改訂されたコード

以下は、修正が適用された改訂されたコードです:

<br>function getContent() {<br> console.log (「古いソースは次のとおりです: " iFrame.src);<br> iFrame.src="LoremIpsum.html";<br> console.log("新しいソースは: " iFrame.src);<br>}</p>
<p>// ボタンと iframe への参照を取得します<br>var btn = document.getElementById("btnChangeSrc");<br>var iFrame = document.getElementById("contentFrame");</p>
<p>// ボタンのクリック イベント ハンドラーを設定します<br>btn.addEventListener("click", getContent);<br>

以上がリンクをクリックしても JavaScript 関数が実行されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。