回答編集履歴
5
文章の修正
answer
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
---
|
|
8
8
|
追記頂いたので回答を更新します。
|
|
9
9
|
|
|
10
|
-
そもそも`const getNum1 = () => {}`の
|
|
10
|
+
そもそも`const getNum1 = () => {}`の構文、各記号が何を指しているかは分かりますか？
|
|
11
11
|
`const`や`()`、`=>`、`{}`のことです。
|
|
12
12
|
|
|
13
13
|
まずは前提を知らないとどのように手を付けて良いか分からなくなるので、これら記号、構文について調べましょう。
|
4
追記
answer
CHANGED
|
@@ -46,8 +46,10 @@
|
|
|
46
46
|
きちんと意図した値が入っているかは確認をしてください。
|
|
47
47
|
```javascript
|
|
48
48
|
console.log(getNum1());
|
|
49
|
-
console.log(getNum2());
|
|
50
49
|
```
|
|
50
|
+
|
|
51
|
+
`getNum2`も実装方法は`getNum1`と同じです。
|
|
52
|
+
|
|
51
53
|
参考:
|
|
52
54
|
[Document.getElementById()
|
|
53
55
|
](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)
|
3
もう少し真面目にかいた
answer
CHANGED
|
@@ -6,20 +6,44 @@
|
|
|
6
6
|
|
|
7
7
|
---
|
|
8
8
|
追記頂いたので回答を更新します。
|
|
9
|
+
|
|
10
|
+
そもそも`const getNum1 = () => {}`の各構文が何を指しているかは分かりますか？
|
|
11
|
+
`const`や`()`、`=>`、`{}`のことです。
|
|
12
|
+
|
|
13
|
+
まずは前提を知らないとどのように手を付けて良いか分からなくなるので、これら記号、構文について調べましょう。
|
|
14
|
+
|
|
15
|
+
- [const](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/const)
|
|
16
|
+
- [関数の宣言](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions#Function_declarations)
|
|
17
|
+
- [アロー関数](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/Arrow_functions)
|
|
18
|
+
|
|
19
|
+
これらの前提をご理解いただいた上で下記回答を読んでください。
|
|
20
|
+
|
|
21
|
+
> ①のnum1の数値を戻り値としてreturnする処理からコードが書けず
|
|
22
|
+
|
|
23
|
+
まずはHTML上の`input`タグに入力されたテキストを取得する必要があります。
|
|
24
|
+
実装は「Javascript input 取得」のように調べてみると引っかかります。
|
|
25
|
+
|
|
26
|
+
`return`については上記URLから関数の学習をされていれば問題ないかと思います。
|
|
27
|
+
|
|
9
28
|
0. `document.getElementById`でHTML上の指定したIDの`input`要素を取得
|
|
10
29
|
0. その`input`要素のvalueプロパティを`return`する
|
|
11
30
|
|
|
12
31
|
```javascript
|
|
13
32
|
const getNum1 = () => {
|
|
33
|
+
let num1 = document.getElementById("num1");
|
|
34
|
+
return num1.value;
|
|
35
|
+
}
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
上記コードでは変数(`num1`)に保持していましたが、そうしないで下記のように書くこともできます。
|
|
39
|
+
```javascript
|
|
40
|
+
const getNum1 = () => {
|
|
14
41
|
return document.getElementById("num1").value;
|
|
15
42
|
}
|
|
16
|
-
const getNum2 = () => {
|
|
17
|
-
return document.getElementById("num2").value;
|
|
18
|
-
}
|
|
19
43
|
```
|
|
20
44
|
|
|
21
45
|
動作確認をしたい場合は`console.log`を使うと良いでしょう。
|
|
22
|
-
きちんと意図した値が入っているか
|
|
46
|
+
きちんと意図した値が入っているかは確認をしてください。
|
|
23
47
|
```javascript
|
|
24
48
|
console.log(getNum1());
|
|
25
49
|
console.log(getNum2());
|
2
追記
answer
CHANGED
|
@@ -2,4 +2,29 @@
|
|
|
2
2
|
- `getNum1`を外で呼び出していない
|
|
3
3
|
- `return`で自分の関数を呼び出している(再帰呼び出しを意図しているなら必ずしもその限りではない)
|
|
4
4
|
|
|
5
|
-
基本的にはMDNの記事が丁寧に教えてくれていますから、関数の定義・呼び出し方法については[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)を参照してください。
|
|
5
|
+
基本的にはMDNの記事が丁寧に教えてくれていますから、関数の定義・呼び出し方法については[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)を参照してください。
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
追記頂いたので回答を更新します。
|
|
9
|
+
0. `document.getElementById`でHTML上の指定したIDの`input`要素を取得
|
|
10
|
+
0. その`input`要素のvalueプロパティを`return`する
|
|
11
|
+
|
|
12
|
+
```javascript
|
|
13
|
+
const getNum1 = () => {
|
|
14
|
+
return document.getElementById("num1").value;
|
|
15
|
+
}
|
|
16
|
+
const getNum2 = () => {
|
|
17
|
+
return document.getElementById("num2").value;
|
|
18
|
+
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
動作確認をしたい場合は`console.log`を使うと良いでしょう。
|
|
22
|
+
きちんと意図した値が入っているかどうかは確認をしてください。
|
|
23
|
+
```javascript
|
|
24
|
+
console.log(getNum1());
|
|
25
|
+
console.log(getNum2());
|
|
26
|
+
```
|
|
27
|
+
参考:
|
|
28
|
+
[Document.getElementById()
|
|
29
|
+
](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById)
|
|
30
|
+
[入力フォームの値を取得する方法](https://lab.syncer.jp/Web/JavaScript/Snippet/28/)
|
1
少しだけ真面目に書いた
answer
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
下記2点が気になります。
|
|
2
|
+
- `getNum1`を外で呼び出していない
|
|
1
|
-
|
|
3
|
+
- `return`で自分の関数を呼び出している(再帰呼び出しを意図しているなら必ずしもその限りではない)
|
|
2
4
|
|
|
3
|
-
|
|
5
|
+
基本的にはMDNの記事が丁寧に教えてくれていますから、関数の定義・呼び出し方法については[こちら](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions)を参照してください。
|