71154


### 前提・実現したいこと

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

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

[![](https://i.stack.imgur.com/65zbE.png)](https://i.stack.imgur.com/65zbE.png)  
定価と掛け率を掛けた結果を単価に表示させたいのですがうまくいきません。

### 該当のソースコード

[code]

    <!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>
    
[/code]

### 最初の質問との変更点

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


CC BY-SA 4.0
2020-10-12T05:06:49.430
71122
2020-10-13T03:30:31.667
2020-10-12T13:20:11.743
42077
42077
question
javascript html html5
javascriptが動きません


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

[code]

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

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

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


CC BY-SA 4.0
2020-10-12T05:47:21.403
71123
2020-10-12T05:47:21.403
217
71122
answer


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の作りを変更して、もう一度組みなおしてください。


CC BY-SA 4.0
2020-10-13T01:16:36.537
71150
2020-10-13T01:16:36.537
22665
71122
answer


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

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

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

[code]

    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);
      });
    });
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2020-10-13T01:40:41.217
71154
2020-10-13T03:30:31.667
2020-10-13T03:30:31.667
3475
3475
71122
answer