Home
TypeScript
【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

どうも!かけちまるです!

HTMLのイベント属性でTypeScriptに書いた関数を呼び出すときに'関数名' is not definedというエラーが発生したので解決策をメモっておきます。

この記事では、

  • ・HTMLのイベント属性からTypeScriptで定義した関数を呼び出す方法

がわかります。

HTMLのイベント属性かえで定義した関数を呼び出す方法

エラー状況

HTMLのイベント属性からTypeScriptで定義した関数を呼び出そうとした時にエラーが発生しました。

HTML
コピー
<button onclick="clickEvent()">ここをクリック</button>
TypeScript
コピー
function clickEvent(){ console.log('クリックされました。'); };

ブラウザのコンソールでは、'関数名' is not definedというエラーが発生していて、

ブラウザのコンソールエラー

TypeScriptからは、'関数名' が宣言されていますが、その値が読み取られることはありません。ts(6133)というエラーが発生しています。

TypeScriptエラー

解決方法

windowに加えたら動くようになったものの理由は分からないです。
それに型エラーが出ているのでそれの対処も必要そうです。

TypeScript
コピー
window.clickEvent = function clickEvent(){ console.log('クリックされました。'); };

まとめ

イベント属性は極力使わず、大人しくTypeScriptに書いた方が良さそうですね。

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

【Contact Form 7】ログインユーザーのためにselectのデフォルト値を設定する

画像の読み込み進度を%表示するオープニングアニメーション

画像の読み込み進度を%表示するオープニングアニメーション

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【縦横比を保つ】YouTube埋め込みをレスポンシブ対応にする

【Google Maps API】Googleマップ埋め込みのピンを変更する

【Google Maps API】Googleマップ埋め込みのピンを変更する

bxSliderのデザインカスタムと不具合の対処

bxSliderのデザインカスタムと不具合の対処

【Three.js基礎】概念の理解と立方体の実装

【Three.js基礎】概念の理解と立方体の実装