【javaScript】数値を戻り値としてreturnする

前提・実現したいこと

以下のHTMLに対応するjavaScriptを作成中です。
①num1に入力した数値を受け取る
const getNum1 = () => {
// num1の数値を戻り値としてreturnする処理};

②num2に入力した数値を受け取る
const getNum2 = () => {
// num2の数値を戻り値としてreturnする処理};

③結果を<div id="box">内に表示する
const showResult = (num) => {
// <div id="box">にnumを表示する処理};

①から③を使って作成するよう指示があります。

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

VM60:1 Uncaught SyntaxError: Identifier 'getNum1' has already been declared
    at <anonymous>:1:1

該当のソースコード

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Test</title>
  </head>
  <body>
    <div>
      <input type="text" id="num1">
      <input type="text" id="num2">
    </div>
    <button type="button" id="button-add">+</button>
    <button type="button" id="button-sub">-</button>
    <button type="button" id="button-mul">*</button>
    <button type="button" id="button-div">/</button>
    <div id="box"></div>
    <script src="main.js"></script>
  </body>
</html>

試したこと

基本的なことですみません。質問内容を変更してみました。
文法的なものだと思うのですが、調べてもわかりませんので分かる方教えて下さい。
①のnum1の数値を戻り値としてreturnする処理からコードが書けず、困っています。
よろしくお願いします。

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

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

BluOxy

2019/08/21 03:23

調べたURLのどの部分が分からないのか聞くと良いでしょう。 0から教えるのは大変です。

退会済みユーザー

2019/08/21 03:30

情報が少なすぎて回答不可能です。

popeye_373

2019/08/21 03:46

すみません、質問の仕方を見直してみます。ありがとうございます。

m.ts10806

2019/08/21 03:59

質問は編集できますので。

m.ts10806

2019/08/21 04:15

＞調べてもわかりませんのでこれが「調べたところでどうせ自分には理解できない（調べてもない）」のか「調べた内容はあるがそれでは理解できない（調べた）」のかで全然違ってきます。それを分かりやすいように書いてもらうのと後者（調べた）であればBluOxyさんの指摘にあるように調べたURLを記載し何がどのように分からなかったのか記載してください。それにより質問者さんがどこまで理解できているか分かるので、アドバイスの方向性が定まり、より的確な回答を得られるようになります。 https://teratail.com/help/question-tips#questionTips1-2 https://teratail.com/help/question-tips#questionTips2-1

think49

2019/08/21 13:17

main.js のコードが質問文に書いてありませんでした。

行動規範の内容に同意します

回答2件

ベストアンサー

下記2点が気になります。

getNum1を外で呼び出していない
returnで自分の関数を呼び出している(再帰呼び出しを意図しているなら必ずしもその限りではない)

基本的にはMDNの記事が丁寧に教えてくれていますから、関数の定義・呼び出し方法についてはこちらを参照してください。

追記頂いたので回答を更新します。

そもそもconst getNum1 = () => {}の構文、各記号が何を指しているかは分かりますか？
constや()、=>、{}のことです。

まずは前提を知らないとどのように手を付けて良いか分からなくなるので、これら記号、構文について調べましょう。

これらの前提をご理解いただいた上で下記回答を読んでください。

①のnum1の数値を戻り値としてreturnする処理からコードが書けず

まずはHTML上のinputタグに入力されたテキストを取得する必要があります。
実装は「Javascript input 取得」のように調べてみると引っかかります。

returnについては上記URLから関数の学習をされていれば問題ないかと思います。

document.getElementByIdでHTML上の指定したIDのinput要素を取得
そのinput要素のvalueプロパティをreturnする

javascript
1const getNum1 = () => {
2    let num1 = document.getElementById("num1");
3    return num1.value;
4}

上記コードでは変数(num1)に保持していましたが、そうしないで下記のように書くこともできます。

javascript
1const getNum1 = () => {
2    return document.getElementById("num1").value;
3}

動作確認をしたい場合はconsole.logを使うと良いでしょう。
きちんと意図した値が入っているかは確認をしてください。

javascript
1console.log(getNum1());

getNum2も実装方法はgetNum1と同じです。

参考:
Document.getElementById()

入力フォームの値を取得する方法

投稿2019/08/21 03:25

編集2019/08/21 04:31

BluOxy

総合スコア2663

querykuma

2019/08/21 11:07

> ①から③を使って作成するよう指示があります。学校でプログラミングの教育を受けているようです。こんなに丁寧に回答してしまったらプログラミングの訓練にならないでしょう。 > A1. Learn more by myself about the things around each question. > A2. I would not give them a direct answer. They have to learn to reach the point by themselves. > Also we should show the source of information, ex. the official documents, its sites, report by its developers and so on. > To quit answering, even if you have an answer, may be a good chance for you to get what the purpose of your answer is. 他の回答者の引用です。参考にしてください。

BluOxy

2019/08/21 12:46

承知しました。それでは魚を求める質問に対しては直接答えは出さずに調べろとだけ回答するようにいたします。

BluOxy

2019/08/21 13:02 編集

>popeye_373さん今回は詳細に回答を書きましたが、JavaScriptの機能について新たに疑問が出た際は質問の前にまずはリファレンスを読みましょう。99%の機能は理解できるようになっています。リファレンスに出てくる一部のIT用語についても、それ等が載っている辞書を引けば大半は理解できます。ここで言語の機能について質問して回答をもらってもquerykumaさんの仰る様にプログラミングの訓練にはなりませんから、能動的に情報を集める癖をつけてください。

popeye_373

2019/08/22 03:54

>BluOxy さん回答ありがとうございます。この課題はWeb電卓の作成だったのですが、教えて頂いた事をもとに自分なりに作成し課題の提出をしたのですが、再提出になってしまいました。電卓自体は機能するようコードが書けたのですが、関数の使い回しができていないとのことでした。まず、調べ方や聞き方が出来ていないことが分かりましたので、以降は自分で調べて作成してみたいと思います。９９％の機能が理解できるようになっているという言葉を信じたいと思います。ご丁寧にありがとうございました！

行動規範の内容に同意します

テキストボックスnum1に入力された数値

バリデートをかけないとnum1に入力されたものが必ずしも数値かどうかはわかりませんが
そのあたりは大丈夫でしょうか？
num1に入力された値を取得するならこれでいいでしょう

javascript
1<script>
2const getNum1=()=>document.querySelector('[name=num1]').value;
3window.addEventListener('DOMContentLoaded', ()=>{
4  document.querySelector('#check').addEventListener('click',()=>{
5    console.log(getNum1());
6  });
7});
8</script>
9<input type="text" value="123" name="num1">
10<input type="submit" value="check" id="check">