回答編集履歴

2

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

2019/12/17 08:40

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -86,6 +86,8 @@
86
86
 
87
87
 
88
88
 
89
+ // クリックした後の処理のどこかで、下記を実行
90
+
89
91
  console.log(text.texts); // [ infomation.nameに入った文字列 + 'さん、はじめまして', infomation.nameに入った文字列 + 'さん、おはようございます', infomation.nameに入った文字列 + 'さん、こんにちは'];
90
92
 
91
93
  ```

1

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

2019/12/17 08:40

投稿

miyabi_pudding
miyabi_pudding

スコア9555

test CHANGED
@@ -9,3 +9,87 @@
9
9
  それ以降(クリックしたあと)の処理の時に、`name`変数を使用すれば、
10
10
 
11
11
  しっかりと、入力した文字列が`name`に入ってるはずです。
12
+
13
+
14
+
15
+ では、どうすれば先に定義した`text`に反映できるか。
16
+
17
+ いくつ方法がありますが、**オブジェクト型**を使ったり、`text`変数を、動的にしたりするのが手取り早いでしょう。
18
+
19
+
20
+
21
+ ```javascript
22
+
23
+ // そもそものname情報を、オブジェクト型にして、参照が保持されやすい状態に
24
+
25
+ const infomation = {
26
+
27
+ name: ''
28
+
29
+ };
30
+
31
+
32
+
33
+ // テキストを動的にするためのクラスを定義
34
+
35
+ class textsClass {
36
+
37
+ this.texts = [];
38
+
39
+ // テキストの中身を変更するメソッド
40
+
41
+ textsValue() {
42
+
43
+ this.texts = [
44
+
45
+ infomation.name + 'さん、はじめまして',
46
+
47
+ infomation.name + 'さん、おはようございます',
48
+
49
+ infomation.name + 'さん、こんにちは'
50
+
51
+ ];
52
+
53
+ }
54
+
55
+ }
56
+
57
+ // 上記クラスを元にしたインスタンスを定義
58
+
59
+ const text = new textsClass();
60
+
61
+
62
+
63
+ function get_name() {
64
+
65
+ infomation.name = document.getElementById('name').value;
66
+
67
+ document.getElementById('output').innerHTML = '入力した名前は' + infomation.name + 'です。<br><input type="button" value="この名前で決定する" id="input_btn2" onclick="confirm()">';
68
+
69
+ document.getElementById('input_btn').style.display="none";
70
+
71
+ // テキストの中身を変更する関数を実行
72
+
73
+ text.textsValue();
74
+
75
+ }
76
+
77
+
78
+
79
+ function confirm(){
80
+
81
+ document.getElementById('name_input').style.display="none";
82
+
83
+ document.getElementById('next_view').innerHTML = text[0];
84
+
85
+ }
86
+
87
+
88
+
89
+ console.log(text.texts); // [ infomation.nameに入った文字列 + 'さん、はじめまして', infomation.nameに入った文字列 + 'さん、おはようございます', infomation.nameに入った文字列 + 'さん、こんにちは'];
90
+
91
+ ```
92
+
93
+
94
+
95
+ って、作業依頼に答えてしまった。