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

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

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

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

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

解決済

javascriptでグローバルな配列を使わずに、一つの要素のイベントが他の要素にも影響を与えるプログラムを書きたいです。

mizunodesu
mizunodesu

総合スコア1

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

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

1回答

1リアクション

1クリップ

431閲覧

投稿2022/11/24 13:31

前提

javascriptで「文字を表示する要素」と「テキストボックス」と「ボタン」を適当に10個ほど表示して、テキストボックスに値を入力してボタンを押すと、おのおのの文字が変わって、"All"と入力したときだけ、他のすべての要素の文字も「All!!」となるようなテストプログラムを書いてみました。

実現したいこと

グローバルな配列を使わずに一つの関数かクラスのようなもので完結したプログラムにしたいです。

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

このように、特定の条件の時に関連する他のオブジェクトにも影響を与えたい時に、オブジェクトを配列に入れといてループ処理でできることはわかったのですが、他のプログラムに組み込みたい時に、グローバル変数を使っていると、少し変数の名前が変わったりしただけで、中身のプログラムも書き換えなくてはならないのが不便だと思い、知恵をお借りしたいと思いました。

該当のソースコード

javascript

<!DOCTYPE html> <html lang="ja"> <head> <mata charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>test</title> </head> <body> <div></div> <script type="text/javascript"> const elements = []; const generateInput = class { constructor() { const div = this.createInputForm(); this.changeOperation(div); elements.push(div); return div; } createInputForm = () => { const div = document.createElement("div"); const createHTwo = () => { const hTwo = document.createElement("h2"); hTwo.textContent = "初期値!"; return hTwo; } const createInput = () => { const input = document.createElement("input"); input.type = "text"; return input; } const createButton = () => { const button = document.createElement("button"); button.type = "button"; button.textContent = "更新!" return button; } div.append(createHTwo(), createInput(), createButton()); return div; } changeOperation = (element) => { const hTwo = element.children[0]; const input = element.children[1]; const button = element.children[2]; button.addEventListener('click', () => { if (input.value === "All") { elements.forEach((element, index) => { elements[index].children[0].textContent = "All!!"; }); } else { hTwo.textContent = input.value; } }, false); } } const body = document.querySelector("body"); for (i = 0; i < 10; i++) { const input = new generateInput(); body.append(input); } </script> </body> </html>

試したこと

コード全体を関数でくくって、その関数内で配列を定義してグローバルからforループで呼び出してみても、関数が一回実行されるたびに、関数内の配列に一個だけエレメントが入って、処理から抜けての繰り返しになってしまいます。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

Cocode👍を押しています

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

maisumakun

2022/11/24 13:38

「コード全体を関数でくくって」と言われた場合、JavaScriptでは本当に全部(forループを回すところも)入れるコードを書くことも可能なのですが、それでは何か問題がある状況なのでしょうか?
mizunodesu

2022/11/24 19:11

forループで呼び出すのは、使いたい時にグローバルスコープから呼び出すことを想定しておりまして、一行目の"const elements = [];"を関数かクラス内に閉じ込められないかなと思った意図でした。 ご指摘ありがとうございます。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

DOM

DOMは、Document Object Modelの略で、HTML文書やXML文書をアプリケーションから利用するためのAPIです。

JavaScript

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