teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問【javaScript】数値を戻り値としてreturnする

編集履歴

回答編集履歴

5

文章の修正

2019/08/21 04:31

投稿

BluOxy
BluOxy

スコア2663

test CHANGED
@@ -16,7 +16,7 @@
16
16
 
17
17
 
18
18
 
19
- そもそも`const getNum1 = () => {}`の各構文が何を指しているかは分かりますか？
19
+ そもそも`const getNum1 = () => {}`の構文、各記号が何を指しているかは分かりますか？
20
20
 
21
21
  `const`や`()`、`=>`、`{}`のことです。
22
22
 

4

追記

2019/08/21 04:31

投稿

BluOxy
BluOxy

スコア2663

test CHANGED
@@ -94,9 +94,13 @@
94
94
 
95
95
  console.log(getNum1());
96
96
 
97
- console.log(getNum2());
97
+ ```
98
98
 
99
+
100
+
99
- ```
101
+ `getNum2`も実装方法は`getNum1`と同じです。
102
+
103
+
100
104
 
101
105
  参考:
102
106
 

3

もう少し真面目にかいた

2019/08/21 04:30

投稿

BluOxy
BluOxy

スコア2663

test CHANGED
@@ -14,6 +14,44 @@
14
14
 
15
15
  追記頂いたので回答を更新します。
16
16
 
17
+
18
+
19
+ そもそも`const getNum1 = () => {}`の各構文が何を指しているかは分かりますか？
20
+
21
+ `const`や`()`、`=>`、`{}`のことです。
22
+
23
+
24
+
25
+ まずは前提を知らないとどのように手を付けて良いか分からなくなるので、これら記号、構文について調べましょう。
26
+
27
+
28
+
29
+ - [const](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const)
30
+
31
+ - [関数の宣言](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#Function_declarations)
32
+
33
+ - [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
34
+
35
+
36
+
37
+ これらの前提をご理解いただいた上で下記回答を読んでください。
38
+
39
+
40
+
41
+ > ①のnum1の数値を戻り値としてreturnする処理からコードが書けず
42
+
43
+
44
+
45
+ まずはHTML上の`input`タグに入力されたテキストを取得する必要があります。
46
+
47
+ 実装は「Javascript input 取得」のように調べてみると引っかかります。
48
+
49
+
50
+
51
+ `return`については上記URLから関数の学習をされていれば問題ないかと思います。
52
+
53
+
54
+
17
55
  0. `document.getElementById`でHTML上の指定したIDの`input`要素を取得
18
56
 
19
57
  0. その`input`要素のvalueプロパティを`return`する
@@ -24,13 +62,23 @@
24
62
 
25
63
  const getNum1 = () => {
26
64
 
27
- return document.getElementById("num1").value;
65
+ let num1 = document.getElementById("num1");
66
+
67
+ return num1.value;
28
68
 
29
69
  }
30
70
 
31
- const getNum2 = () => {
71
+ ```
32
72
 
73
+
74
+
75
+ 上記コードでは変数(`num1`)に保持していましたが、そうしないで下記のように書くこともできます。
76
+
77
+ ```javascript
78
+
79
+ const getNum1 = () => {
80
+
33
- return document.getElementById("num2").value;
81
+ return document.getElementById("num1").value;
34
82
 
35
83
  }
36
84
 
@@ -40,7 +88,7 @@
40
88
 
41
89
  動作確認をしたい場合は`console.log`を使うと良いでしょう。
42
90
 
43
- きちんと意図した値が入っているかどうかは確認をしてください。
91
+ きちんと意図した値が入っているかは確認をしてください。
44
92
 
45
93
  ```javascript
46
94
 

2

追記

2019/08/21 04:29

投稿

BluOxy
BluOxy

スコア2663

test CHANGED
@@ -7,3 +7,53 @@
7
7
 
8
8
 
9
9
  基本的にはMDNの記事が丁寧に教えてくれていますから、関数の定義・呼び出し方法については[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)を参照してください。
10
+
11
+
12
+
13
+ ---
14
+
15
+ 追記頂いたので回答を更新します。
16
+
17
+ 0. `document.getElementById`でHTML上の指定したIDの`input`要素を取得
18
+
19
+ 0. その`input`要素のvalueプロパティを`return`する
20
+
21
+
22
+
23
+ ```javascript
24
+
25
+ const getNum1 = () => {
26
+
27
+ return document.getElementById("num1").value;
28
+
29
+ }
30
+
31
+ const getNum2 = () => {
32
+
33
+ return document.getElementById("num2").value;
34
+
35
+ }
36
+
37
+ ```
38
+
39
+
40
+
41
+ 動作確認をしたい場合は`console.log`を使うと良いでしょう。
42
+
43
+ きちんと意図した値が入っているかどうかは確認をしてください。
44
+
45
+ ```javascript
46
+
47
+ console.log(getNum1());
48
+
49
+ console.log(getNum2());
50
+
51
+ ```
52
+
53
+ 参考:
54
+
55
+ [Document.getElementById()
56
+
57
+ ](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)
58
+
59
+ [入力フォームの値を取得する方法](https://lab.syncer.jp/Web/JavaScript/Snippet/28/)

1

少しだけ真面目に書いた

2019/08/21 04:17

投稿

BluOxy
BluOxy

スコア2663

test CHANGED
@@ -1,5 +1,9 @@
1
+ 下記2点が気になります。
2
+
3
+ - `getNum1`を外で呼び出していない
4
+
1
- 基本的にはMDNの記事が丁寧に教えてくれていますから、こちらを参照してください。
5
+ - `return`で自分の関数を呼び出している(再帰呼び出しを意図しているなら必ずしもその限りではない)
2
6
 
3
7
 
4
8
 
5
- [関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)
9
+ 基本的にはMDNの記事が丁寧に教えてくれていますから、関数の定義・呼び出し方法については[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)を参照してください。