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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

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

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

Local by Flywheelで本番環境のWordPressをローカルに複製する

Local by Flywheelで本番環境のWordPressをローカルに複製する

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【JavaScript】ボタンを押した時の効果音を実装する方法

【JavaScript】ボタンを押した時の効果音を実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

SVGの背景色が変化するグラデーションのアニメーションを実装する方法

clamp関数がSafariで効かない時の対処法

clamp関数がSafariで効かない時の対処法