Q&A
何が404だったのでしょうか。
詳細出てると思います
前提・実現したいこと
javascriptでリアルタイムの計算がしたい
定価と掛け率を掛けた結果を単価のテキストボックスに表示させようとしています。
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>(アプリ名)</title> 6 <link rel="stylesheet" href="/distributor_system/css/reset.css"> 7 <link rel="stylesheet" href="/distributor_system/css/style.css"> 8 </head> 9 <body> 10 <div id="wrapper"> 11 <div id="header"> 12 <h1>(アプリ名)</h1> 13 </div> 14 <div id="content"> 15 <h2>の単価</h2> 16 17 18 <form method="POST" action="/distributor_system/wholesales/new"> 19 <table> 20 <tbody> 21 <tr> 22 <th>品番</th> 23 <th>定価</th> 24 <th>掛け率</th> 25 <th>単位</th> 26 <th>単価</th> 27 </tr> 28 29 <tr> 30 <td><input type="text" name="product_number" 31 value=""></td> 32 <td><input id="input01" type="text" name="normal_price" 33 value="" /></td> 34 <td><input id="input02" type="text" name="ratio" 35 value=""></td> 36 <td><input type="text" name="unit" 37 value=""></td> 38 <td><input id="answer" type="text" name="total" value=""></td> 39 </tr> 40 41 </tbody> 42 </table> 43 <input type="hidden" name="_token" value="7AB5160FBEC308661E3A883FBC032B4F" /> 44 <button type="submit">登録</button> 45 </form> 46 <script type="text/javascript"> 47 window.onload = function() { 48 var input01 = document.getElementById("input01"); // DOM要素を用意しておく 49 var input02 = document.getElementById("input02"); // DOM要素を用意しておく 50 var answer = document.getElementById("answer"); // DOM要素を用意しておく 51 52 input01.value = ""; // 初期化 53 input02.value = ""; // 初期化 54 answer.value = ""; // 初期化 55 56 input02.onkeyup = function() { // キー入力が終わった瞬間に実行される関数の宣言 57 answer.innerHTML = parseInt(input01.value, 10) 58 * parseInt(input02.value, 10); // 実際の計算 59 }; 60 } 61 </script> 62 </div> 63 <div id="footer"> 64 by Ryo Shimoda. 65 </div> 66 </div> 67 </body> 68</html>
- /favicon.icoと表示されました。
見た感じ /favicon.ico に直アクセスしているように見えますが・・
意図的じゃなくアクセスすることってないと思います。
ひとまず、タグにJava,JSP,Servletいずれもない状態でjspが提示されているので、
ブラウザに表示されたHTMLを提示されるか、タグを追加するか、どちらかは対応してください。
すいません。タグと掲示内容が一致していませんでした。
jspのコードはHTMLに修正しました。
了解です。ただ起きてる現象とJavaScriptは無関係とは思います。
ちなみに、何をしたときにこのfavicon.icoへのリクエストが送られたのでしょう。
サーバーを再起動させたらエラーが出なくなりましたがjavascriptが動きませんでした。
確かにエラーとは無関係でした。
純粋にjavascriptの記述を間違えているのでしょうか。
回答しました。しいてなら、HTMLとJavaScript両方です。
回答2件
0
ベストアンサー
相対的な処理になるのでこんな感じ
投稿2020/10/12 07:59
編集2020/10/13 00:16
総合スコア118221
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('[name=normal_price],[name=ratio]').forEach(x=>{
x.addEventListener('input',()=>{
var v1=parseFloat(x.value);
var other=x.closest('tr').querySelector('[name='+(x.name=="normal_price"?"ratio":"normal_price")+']');
var v2=parseFloat(other.value);
var total=x.closest('tr').querySelector('[name=total]');
var v3=(!isNaN(v1) && !isNaN(v2))?v1*v2:"";
total.value=v3;
});
});
});
</script>
<table>
<tbody>
<tr>
<td><input type="text" name="normal_price" value="" pattern="\d+"></td>
<td><input type="text" name="ratio" value="" pattern="\d+"></td>
<td><input type="text" name="total" value="" readonly></td>
<tr>
<tr>
<td><input type="text" name="normal_price" value="" pattern="\d+"></td>
<td><input type="text" name="ratio" value="" pattern="\d+"></td>
<td><input type="text" name="total" value="" readonly></td>
<tr>
<tr>
<td><input type="text" name="normal_price" value="" /></td>
<td><input type="text" name="ratio" value="" pattern="\d+"></td>
<td><input type="text" name="total" value="" readonly></td>
<tr>
</tbody>
</table>
回答いただきありがとうございます。こちらのコードはjQueryを使用したコードでしょうか？
素のJavaScriptでしょうか？初歩的な質問ですいません。
素のJSです。
jQueryの場合たいていはソースに「$」を多用しています
コピペすれば動作しますが、念の為codepenにサンプルあげときました
無事上記のコードで動きました！ありがとうございました。
0
<td><input id="answer" type="text" name="total" value=""></td> var answer = document.getElementById("answer"); // DOM要素を用意しておく answer.innerHTML = parseInt(input01.value, 10)
inputには.innerHTMLではなく.valueです。
初期化の時に使われている通りですね。
下記は質問のコードが変更される前の回答です。
別の質問の回答にも書いていますが、ID重複が原因です。
個別IDを振るか、クラスにするかして、全ての対象にイベントをaddしていく必要があります。
投稿2020/10/12 06:27
編集2020/10/12 20:55総合スコア80892
あなたの回答
tips
プレビュー
