0

A商品合計の計算結果の配列とB商品合計の計算結果の配列を合算したいのですが表示されません。
恐らく全くこのソースではダメだと思うので簡単でいいのでサンプルソースを頂ければ非常に感謝いたします。

親切な方々の投稿に期待いたします。
元のソースコード:

<!DOCTYPE html>
<html>
<head>
  <title>数値計算</title>
</head>
<body>

  <input type="number" id="number1" placeholder="数値1">
  <input type="number" id="number2" placeholder="数値2">
  <input type="number" id="number3" placeholder="数値3">
  <button onclick="calculate1()">商品A</button>

  <div id="result1"></div>

  <input type="number" id="number4" placeholder="数値4">
  <input type="number" id="number5" placeholder="数値5">
  <input type="number" id="number6" placeholder="数値6">
  <button onclick="calculate2()">商品B</button>

  <div id="result2"></div>
   
  <button onclick="calculate3()">商品Aと商品B</button>

  <script>
    function calculate1() {
      // 入力された数値を取得
      const number1 = parseFloat(document.getElementById("number1").value);
      const number2 = parseFloat(document.getElementById("number2").value);
      const number3 = parseFloat(document.getElementById("number3").value);

      // 計算(例:加算)
      const result1 = number1 + number2 + number3;

      // 結果を表示
      document.getElementById("result1").innerText = "結果: " + result1;
    }
    
    function calculate2() {
      // 入力された数値を取得
      const number4 = parseFloat(document.getElementById("number4").value);
      const number5 = parseFloat(document.getElementById("number5").value);
      const number6 = parseFloat(document.getElementById("number6").value);

      // 計算(例:加算)
      const result2 = number4 + number5 + number6;

      // 結果を表示
      document.getElementById("result2").innerText = "結果: " + result2;
    }
  
    function calculate3() {
       // 計算(例:加算)
      const result3 = result1 + result2;
      // 結果を表示
      document.getElementById("result3").innerText = "結果: " + result3;
    }
    
  </script>
</body>
</html>

(追記)
回答を受けて編集いたしました。よろしくお願いいたします。

<!DOCTYPE html>
<html>
<head>
  <title>数値計算</title>
</head>
<body>

  <input type="number" id="number1" placeholder="数値1">
  <input type="number" id="number2" placeholder="数値2">
  <input type="number" id="number3" placeholder="数値3">
  <button onclick="calculate1() return result1;">商品A</button>

  <div id="result1"></div>

  <input type="number" id="number4" placeholder="数値4">
  <input type="number" id="number5" placeholder="数値5">
  <input type="number" id="number6" placeholder="数値6">
  <button onclick="calculate2() return result2;">商品B</button>

  <div id="result2"></div>
   
  <button onclick="calculate3()">商品Aと商品B</button>

  <script>
    function calculate1() return result1;{
      // 入力された数値を取得
      const number1 = parseFloat(document.getElementById("number1").value);
      const number2 = parseFloat(document.getElementById("number2").value);
      const number3 = parseFloat(document.getElementById("number3").value);

      // 計算(例:加算)
      const result1 = number1 + number2 + number3;

      // 結果を表示
      document.getElementById("result1").innerText = "結果: " + result1;
    }
    
    function calculate2() return result2;{
      // 入力された数値を取得
      const number4 = parseFloat(document.getElementById("number4").value);
      const number5 = parseFloat(document.getElementById("number5").value);
      const number6 = parseFloat(document.getElementById("number6").value);

      // 計算(例:加算)
      const result2 = number4 + number5 + number6;

      // 結果を表示
      document.getElementById("result2").innerText = "結果: " + result2;
    }
  
    function calculate3() {
       // 計算(例:加算)
      const result3 = calculate1() + calculate2();
      // 結果を表示
      document.getElementById("result3").innerText = "結果: " + result3;
    }
    
  </script>
</body>
</html>

3
  • 質問者さんの環境では onclick="calculate1() return result1;" とか、function calculate1() return result1;{ というコードは有りなのでしょうか? 文法エラーで何も動いてないのでは? ディベロッパーツールのコンソールタブを見てはいかが。
    – WebSurfer
    Commented 7月30日 22:44
  • document.getElementById("result3") で取得しようとしている html 要素がコードには見当たりません。上のコメントとこのコメントの件を直したら動きませんか? 動かない時はディベロッパーツールを見てエラーがないか調べてください。
    – WebSurfer
    Commented 7月30日 23:10
  • 表題に「配列内合計同士の計算を合算したい」と書いてありますが、コードに書いてあるのは、いわゆる JavaScript の「配列」ではないです。そこも勉強してください。
    – WebSurfer
    Commented 7月31日 1:15

2 件の回答 2

2

変数 result1result2 は、関数 calculate1()calculate2() のローカル変数なので、関数 calculate3()内では使えません。

result1result2をグローバル変数にしても動きますが、calculate3() から calculate1()calculate2() を呼び出してしまうのがシンプルでいいかもしれません。

  • calculate1() の最後に return result1; を追加
  • calculate2() の最後に return result2; を追加
  • calculate3()const result3 = result1 + result2;const result3 = calculate1() + calculate2(); に変更

  <button onclick="calculate1() return result1;">商品A</button>
  ...
  <button onclick="calculate2() return result2;">商品B</button>
  ...
    function calculate1() return result1;{
    ...
    function calculate2() return result2;{

回答が言葉足りずで申し訳ありませんでした。 「calculate1() の最後に return result1; を追加」というのは「calculate1() の直後」という意味ではありません。そのようなところにreturnを書くことはできません。「calculate1() の関数内のコードの最後」という意味です。「function calculate1() の直後の { に対応する } の直前」です。

8
  • ご親切な書き込みに感謝いたします。早速入力してソースを完了いたしましたが生憎動きませんでした。私の環境に問題があるのでしょう google chromeの最新版で見ています。テキストファイル(Windows付属のメモ帳)に書いたソースを拡張子を変えて動作確認しています。本当に動かないことが申し訳ないです。
    – jiji about
    Commented 7月30日 12:04
  • 変更後のソースを質問文に追記していただければ助言できます。
    – int32_t
    Commented 7月30日 12:53
  • ご連絡に感謝いたします!!長過ぎるので2回に分けます 、、、 <!DOCTYPE html> <html> <head> <title>数値計算</title> </head> <body> <input type="number" id="number1" placeholder="数値1"> <input type="number" id="number2" placeholder="数値2"> <input type="number" id="number3" placeholder="数値3"> <button onclick="calculate1() return result1;">商品A</button> <div id="result1"></div> <input type="number" id="number4" placeholder="数値4"> <input type="number" id="number5" placeholder="数値5"> <input type="number" id="number6" placeholder="数値6">
    – jiji about
    Commented 7月30日 14:05
  • 1
    回答へのコメントだと読みにく過ぎるので、質問文を編集して追記してください。
    – int32_t
    Commented 7月30日 14:27
  • 1
    回答に追記しました。ところで、質問文のコードを置き換えるのではなく古いコードは残したまま新しいコードを追記して欲しいです。古いコードが消されてしまうと、この回答が意味不明になってしまいます。
    – int32_t
    Commented 7月30日 22:47
0

上の質問に対する私のコメントで、

質問者さんの環境では onclick="calculate1() return result1;" とか、function calculate1() return result1;{ というコードは有りなのでしょうか?

document.getElementById("result3") で取得しようとしている html 要素がコードには見当たりません。上のコメントとこのコメントの件を直したら動きませんか?

・・・と書きましたが、その通り直せば動きます。

html

コピペして動けば良しとするのではなく、return がどういう意味を持つかなど、指摘されたことがどういう事なのかググって調べるなどして是非今後のために学んでください

<!DOCTYPE html>
<html>
<head>
    <title>数値計算</title>
</head>
<body>

    <input type="number" id="number1" placeholder="数値1">
    <input type="number" id="number2" placeholder="数値2">
    <input type="number" id="number3" placeholder="数値3">
    <button onclick="calculate1()">商品A</button>

    <div id="result1"></div>

    <input type="number" id="number4" placeholder="数値4">
    <input type="number" id="number5" placeholder="数値5">
    <input type="number" id="number6" placeholder="数値6">
    <button onclick="calculate2()">商品B</button>

    <div id="result2"></div>

    <button onclick="calculate3()">商品Aと商品B</button>

    <div id="result3"></div>

    <script>
        function calculate1() {
            // 入力された数値を取得
            const number1 = parseFloat(document.getElementById("number1").value);
            const number2 = parseFloat(document.getElementById("number2").value);
            const number3 = parseFloat(document.getElementById("number3").value);

            // 計算(例:加算)
            const result1 = number1 + number2 + number3;

            // 結果を表示
            document.getElementById("result1").innerText = "結果: " + result1;

            return result1;
        }

        function calculate2() {
            // 入力された数値を取得
            const number4 = parseFloat(document.getElementById("number4").value);
            const number5 = parseFloat(document.getElementById("number5").value);
            const number6 = parseFloat(document.getElementById("number6").value);

            // 計算(例:加算)
            const result2 = number4 + number5 + number6;

            // 結果を表示
            document.getElementById("result2").innerText = "結果: " + result2;

            return result2;
        }

        function calculate3() {
            // 計算(例:加算)
            const result3 = calculate1() + calculate2();
            // 結果を表示
            document.getElementById("result3").innerText = "結果: " + result3;
        }

    </script>
</body>
</html>

実行結果

画像の説明をここに入力

1
  • 本当に皆様方の温かい書き込みに感謝しかありません。 ソースコードの書いてあることを読めばその通りだと思いました。 num1+num2+num3などで取得した値をresult1()に入れて表示し出しその結果をまたアクションを起こしたcalculate1()に戻せというのがreturnだったんですね。目が鱗です。本当に書き込みをして頂いた皆様方に感謝しかごさいません。ありがとうございました。
    – jiji about
    Commented 7月31日 2:31

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。