JavaScriptでonclickイベントの引数を扱う方法とは【メンターが回答】

「JavaScriptでonclickイベントの引数を扱う方法とは。」という質問にTechAcademyの現役エンジニアが解決方法を回答しています。onclickイベントの引数を扱う書き方についてぜひ理解しておきましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

※TechAcademyに実際に寄せられた質問に現役エンジニアのメンターが回答しました。

 

田島悠介

質問に対して現役のエンジニアが回答していくシリーズだね!

大石ゆかり

今回はどういう質問でしょうか?

田島悠介

JavaScriptでonclickイベントの引数を扱う方法だね!実際に回答してもらった内容を紹介するね!

大石ゆかり

お願いします!

質問

onclickイベントのcancel( )の引数に、自身のidの値(cnt)を設定したいのですが、現在は下記のように実装しており(該当のソースコード)、エラーになってしまいます。

エラー内容

Uncaught TypeError: Cannot read property 'id' of undefined

例えばcntの値が5だったらcancel( )の引数に5を設定したいです。

 

該当のソースコード

<input id = "cnt" type = "button" onclick = "this.parentElement.remove();cancel(this.elements.id)" value = "Cancel" />

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

メンターからの回答

onclickイベントのcancel( )の引数に、自身のidの値(cnt)を設定したい

cntが変数として定義されているようなので、そのまま使うと良いと思います。

実装としては以下です。

<input id = "cnt" type = "button" onclick = "this.parentElement.remove();cancel(cnt)" value = "Cancel" />

 

以上、JavaScriptでonclickイベントの引数を扱う方法について解説しました。

TechAcademyでは、現役JavaScriptエンジニアのメンターが質問にすぐ回答します。

他にもJavaScriptでグローバル変数を取得する方法についてメンターが回答しているので、合わせてご覧ください。

 

回答してくれたメンター

小芝 涼太(こしばりょうた)

Webアプリケーションエンジニア。

Vue.jsを用いたフロントエンド開発を中心に、UXデザインなども行なっております。

 

田島悠介

JavaScriptでonclickイベントの引数を扱う方法について解説したよ。

大石ゆかり

cancel(cnt)という形で、id名を引数にするだけでこの要素自体を引数として渡せるんですね。

田島悠介

そうそう。ただid属性名やname属性名と同じ名前の関数があった場合、そちらの方が優先されて代入されることがあるので注意が必要だよ。

大石ゆかり

わかりました。ありがとうございます!

 

TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。

現役エンジニアがパーソナルメンターとして受講生に1人ずつつき、マンツーマンのメンタリングで学習をサポートし、最短4週間でオリジナルWebサービスを開発することが可能です。

独学に限界を感じている場合はご検討ください。