teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

2

クリック後の処理で出力した場合ということを追記

2019/12/17 08:40

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -42,6 +42,7 @@
42
42
  document.getElementById('next_view').innerHTML = text[0];
43
43
  }
44
44
 
45
+ // クリックした後の処理のどこかで、下記を実行
45
46
  console.log(text.texts); // [ infomation.nameに入った文字列 + 'さん、はじめまして', infomation.nameに入った文字列 + 'さん、おはようございます', infomation.nameに入った文字列 + 'さん、こんにちは'];
46
47
  ```
47
48
 

1

どうすれば反映できるかを記載

2019/12/17 08:40

投稿

miyabi_pudding
miyabi_pudding

スコア9559

answer CHANGED
@@ -3,4 +3,46 @@
3
3
  (inoput#input_btnをクリックしさえすれば)
4
4
 
5
5
  それ以降(クリックしたあと)の処理の時に、`name`変数を使用すれば、
6
- しっかりと、入力した文字列が`name`に入ってるはずです。
6
+ しっかりと、入力した文字列が`name`に入ってるはずです。
7
+
8
+ では、どうすれば先に定義した`text`に反映できるか。
9
+ いくつ方法がありますが、**オブジェクト型**を使ったり、`text`変数を、動的にしたりするのが手取り早いでしょう。
10
+
11
+ ```javascript
12
+ // そもそものname情報を、オブジェクト型にして、参照が保持されやすい状態に
13
+ const infomation = {
14
+ name: ''
15
+ };
16
+
17
+ // テキストを動的にするためのクラスを定義
18
+ class textsClass {
19
+ this.texts = [];
20
+ // テキストの中身を変更するメソッド
21
+ textsValue() {
22
+ this.texts = [
23
+ infomation.name + 'さん、はじめまして',
24
+ infomation.name + 'さん、おはようございます',
25
+ infomation.name + 'さん、こんにちは'
26
+ ];
27
+ }
28
+ }
29
+ // 上記クラスを元にしたインスタンスを定義
30
+ const text = new textsClass();
31
+
32
+ function get_name() {
33
+ infomation.name = document.getElementById('name').value;
34
+ document.getElementById('output').innerHTML = '入力した名前は' + infomation.name + 'です。<br><input type="button" value="この名前で決定する" id="input_btn2" onclick="confirm()">';
35
+ document.getElementById('input_btn').style.display="none";
36
+ // テキストの中身を変更する関数を実行
37
+ text.textsValue();
38
+ }
39
+
40
+ function confirm(){
41
+ document.getElementById('name_input').style.display="none";
42
+ document.getElementById('next_view').innerHTML = text[0];
43
+ }
44
+
45
+ console.log(text.texts); // [ infomation.nameに入った文字列 + 'さん、はじめまして', infomation.nameに入った文字列 + 'さん、おはようございます', infomation.nameに入った文字列 + 'さん、こんにちは'];
46
+ ```
47
+
48
+ って、作業依頼に答えてしまった。