0

前提・実現したいこと

javascriptでリアルタイムの計算がしたい

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


定価と掛け率を掛けた結果を単価に表示させたいのですがうまくいきません。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>(アプリ名)</title>
        <link rel="stylesheet" href="/distributor_system/css/reset.css">
        <link rel="stylesheet" href="/distributor_system/css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>(アプリ名)</h1>
            </div>
            <div id="content">
                <h2>職人Aの単価</h2>
        
        
        <form method="POST" action="/distributor_system/wholesales/new">
            <table>
                <tbody>
                    <tr>
                        <th>品番</th>
                        <th>定価</th>
                        <th>掛け率</th>
                        <th>単位</th>
                        <th>単価</th>
                    </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                </tbody>
            </table>
            <input type="hidden" name="_token" value="C113A68F41742037FFC1FB91F89F670D" />
            <button type="submit">登録</button>
        </form>
        <script type="text/javascript">
            window.onload = function() {
                var input01 = document.getElementById("input01"); // DOM要素を用意しておく
                var input02 = document.getElementById("input02"); // DOM要素を用意しておく
                var answer = document.getElementById("answer"); // DOM要素を用意しておく

                input01.value = ""; // 初期化
                input02.value = ""; // 初期化
                answer.value = ""; // 初期化

                input02.onkeyup = function() { // キー入力が終わった瞬間に実行される関数の宣言
                    answer.innerHTML = parseInt(input01.value, 10)
                            * parseInt(input02.value, 10); // 実際の計算
                };
            }
        </script>
            </div>
            <div id="footer">
                by Ryo Shimoda.
            </div>
        </div>
    </body>
</html>

最初の質問との変更点

HTTPステータス404のエラーとjavascriptが動かないことは全く関係なかったので変更しました。
jspのコードではなくHTMLに変更しました。

4
  • 回答される方へ teratail.com/questions/297470
    – htb
    Commented 2020年10月12日 5:32
  • エラーの画面を追加しました。
    – shimoda
    Commented 2020年10月12日 6:10
  • 「リアルタイムの計算がしたい」では何をしたいのかわかりません。具体的に「〜をすると〜が起きるはずが、〜となってしまう」というように書いてみてください。
    – int32_t
    Commented 2020年10月12日 6:16
  • 恐らく404は関係ない気がします。コンソールでブレイクを設定して、ステップ操作をすると想定どおり動きますか?またjavascriptの問題であるならば、サーバサイドのソースコードではなく、html+jsだけで再現できるコードが作れるはずです。是非追記してみてください
    – keitaro_so
    Commented 2020年10月12日 12:27

3 件の回答 3

1

サーバーから、「status of 404 (Not Found)」が返ってきているのですから、

      <form method="POST" action="<c:url value='/wholesales/new' />">

で始まるformで問題が起きているのだと思います。

value='/wholesales/new' というのは、正しいか? というあたりから確認してはどうでしょう。

2
  • faviconは一切設定していないのですがfaviconを設定しないとJavaScriptが動かないということはあるのでしょうか
    – shimoda
    Commented 2020年10月12日 6:12
  • faviconは、画面に表示するアイコンなので、無くても問題を起こす事はありません。 サーバが、「指定されたリソース(プログラムとか、データとか)が見つかりませんでした(そのため、ロードに失敗しました)」とのメッセージを返してきたのが問題な訳で、そのリソースの所在の指定が正しくないのではないかと思いましたから「正しいか?」という認識が問題解決の起点になると考えます。
    – Fumu 7
    Commented 2020年10月12日 6:41
0

id属性値が重複しているので、提示された<script>のコードは最初のinput01 input02 answer にだけ動いています。項目はたくさんあるわけですから、getElementById()は使えません

イベントのバブリングを利用して、input01 input02 answer の共通の祖先である<tr>でイベントを捕まえるのが一つの手です。下記コードではすべての<tr>にイベントリスナを設定します。

  • keyup イベントだけを処理すると、マウスからテキストをペーストした場合に動きません。inputchange イベントを使います。
  • 数値しか受け付けないフィールドは <input type=number> が適切です。
  • もし name=total の要素はユーザから編集できる必要がない場合は、<output> 要素の方が適切です。

document.querySelectorAll('tr').forEach(tr => {
  tr.addEventListener('input', e => {
    const tr = e.currentTarget;
    const input01 = tr.querySelector('input[name=normal_price]');
    const input02 = tr.querySelector('input[name=ratio]');
    if (input01 && input02 && (e.target == input01 || e.target == input02))
      tr.querySelector('input[name=total]').value =
          parseInt(input01.value) * parseInt(input02.value);
  });
});
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>(アプリ名)</title>
        <link rel="stylesheet" href="/distributor_system/css/reset.css">
        <link rel="stylesheet" href="/distributor_system/css/style.css">
    </head>
    <body>
        <div id="wrapper">
            <div id="header">
                <h1>(アプリ名)</h1>
            </div>
            <div id="content">
                <h2>職人Aの単価</h2>
        
        
        <form method="POST" action="/distributor_system/wholesales/new">
            <table>
                <tbody>
                    <tr>
                        <th>品番</th>
                        <th>定価</th>
                        <th>掛け率</th>
                        <th>単位</th>
                        <th>単価</th>
                    </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                        <tr>
                            <td><input type="text" name="product_number"
                                value=""></td>
                            <td><input id="input01" type="text" name="normal_price"
                                value="" /></td>
                            <td><input id="input02" type="text" name="ratio"
                                value=""></td>
                            <td><input type="text" name="unit"
                                value=""></td>
                            <td><input id="answer" type="text" name="total" value=""></td>
                        </tr>
                    
                </tbody>
            </table>
            <input type="hidden" name="_token" value="C113A68F41742037FFC1FB91F89F670D" />
            <button type="submit">登録</button>
        </form>
            </div>
        </div>
    </body>
</html>

0

HTMLの仕様上IDは必ずドキュメントに一つである必要があります。
今回はIDが複数設定されているためそもそもHTMLの仕様として正しくないため、正しく動かないのでしょう。

Document.getElementById
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

探す要素の ID です。 ID は大文字と小文字の区別がある文字列で、文書内で固有です。指定された ID の要素は一つしかありません。

複数のDOMを操作する場合はClassを設定するなどして
Document.querySelectorAllを用いて、走査的な動作が必要になります。
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

一度HTMLの作りを変更して、もう一度組みなおしてください。

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

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