質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

337閲覧

JavaScriptでクリックイベントのthis.idをStringに変えたい

can1980

総合スコア17

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/01/26 09:07

編集2022/01/26 12:30

JavaScriptでクリックイベントのthis.idをStringに変えたい

JavaScriptで以下のようなコードを書いています。
型変換がうまくできておらず以下のエラーメッセージが発生しました。
文字型として、うまく扱うにはどのようにすればよいでしょうか?

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read properties of undefined (reading 'toString')

該当のソースコード

JavaScript

1function clickEvt(){ 2 const getWindowScrollPosition = function() { 3 return { 4 x : (typeof window.scrollX !== 'undefined') ? window.scrollX : ((typeof document.documentElement.scrollLeft !== 'undefined') ? document.documentElement.scrollLeft : document.body.scrollLeft), 5 y : (typeof window.scrollY !== 'undefined') ? window.scrollY : ((typeof document.documentElement.scrollTop !== 'undefined') ? document.documentElement.scrollTop : document.body.scrollTop) 6 }; 7 }; 8 const position = getWindowScrollPosition(); 9 var eventID= this.id.toString(); 10 const eventNo= eventID.replace(/[^0-9]/g, ''); 11 eventID= 'position'+eventNo; 12 console.log(eventID); 13 document.getElementById(eventID).value = position['x']+','+position['y']; 14} 15const hoge = document.getElementsByClassName('clickEvent'); 16for (var i = 0; i < hoge.length; i++) { 17 hoge[i].addEventListener('click', clickEvt, false); 18}

試したこと

var eventID= this.id;
const eventNo= eventID.replace(/[^0-9]/g, '');
と初めはしたのですが、replaceを持たないと型のエラーとなっており。
文字型として渡してほしくthis.id.toString();としました。

間違っていたこと

スクリプトの対象となっていたHTML本文が間違っていました。
全て「pocition」となっておりJavaScriptでの指定の「position」ではエラーとなったようです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2022/01/26 09:14

この内容だけだと再現確認できないので、htmlも提示してください。 そもそもthis.idって想定の値が取れてるのでしょうか。
int32_t

2022/01/26 09:23

何のブラウザで動作確認していますか? console.log(this); console.log(this.id); を足すと何が表示されますか?
m.ts10806

2022/01/26 21:16 編集

いえあの、文章説明(解決した報告)ではなくHTMLそのものを提示していただきたいのですが。 >https://teratail.com/help/question-tips#questionTips35 >あなたがしたことを最も具体的に示すものはプログラムのソースコードです。
guest

回答1

0

ベストアンサー

HTML要素の属性値は基本的に全ていったん文字列として取得されます。
なので、this.idがエラーの通りundefinedなのだと思います。

js

1console.log("".toString()) 2console.log("1".toString()) 3console.log(undefined.toString()) 4console.log(null.toString())

thisではなくevent.currentTargetを参照してみてください。
それ以前にHTMLに問題があるようにも思います(提示されてないのであくまで推測)

投稿2022/01/26 09:20

m.ts10806

総合スコア80850

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

can1980

2022/01/26 10:20

仰る通りHTMLに問題があり、IDの設定ミスでundefinedでした。
m.ts10806

2022/01/26 11:43

どういう問題があったのか分からないので、調整前のhtmlを質問本文に追記しておいてもらえると
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問