- 締切済み
コードの意味(どのようなイベント発生など)を調べて
https://jsfiddle.net/jun68ykt/p2uj40xn/43/は、面積を入力で坪数の計算と坪単価の計算するjavascriptでしたが、要望で価格(○○.○○万円)÷坪数(○○.○○坪)＝坪単価で計算するjavascriptに直す為にそのコードをどのように直すかをやる前にソースコードを理解しないと出来ないと思い、調べながら、修正していました。 昨日、修正したいと要望があって、htmlとjavascriptを修正しています。 で、自分で調べて、1つ1つ修正していますが、インターネットで調べても分からないことがありまして、ここで質問しさせてください。 分からないことがいくつかがあります。 (1) var row = e.target.parentNode.parentNode;の「parentNode.parentNode」をインターネットで調べたら、「【JavaScript】（基礎）親要素・子要素の取得まとめ(2)」が出ました。 parentNodeを2つ付けるということは、祖先要素を取得するようなものだということで、htmlを見ますと、 <input>要素から見ると、<td>要素は親要素で、<tr>要素は祖先要素ということで、合っているでしょうか？ (2) var pos = e.target.className.split(/\s/)[0];の「className.split」をインターネットで調べたら、「かもメモ」が出ました。 先日、修正したいと要望があって、htmlとjavascriptを修正しています。 で、自分で調べて、1つ1つ修正していますが、インターネットで調べても分からないことがありまして、ここで質問しさせてください。 分からないことがいくつかがあります。 (1) var row = e.target.parentNode.parentNode;の「parentNode.parentNode」をインターネットで調べたら、「【JavaScript】（基礎）親要素・子要素の取得まとめ(2)」が出ました。 parentNodeを2つ付けるということは、祖先要素を取得するようなものだということで、htmlを見ますと、 <input>要素から見ると、<td>要素は親要素で、<tr>要素は祖先要素ということで、合っているでしょうか？ (2) var pos = e.target.className.split(/\s/)[0];の「className.split」をインターネットで調べたら、「かもメモ」が出ました。 「className.split」は、class名を取得するときに使うそうですが、「(/\s/)[0]」って、どういうことですか？ それをインターネットで調べたら、これが出ました。 https://stackoverflow.com/questions/28127794/difference-between-split-s-and-split しかし、上記のサイトは、（/\s+/）のことを 『1つの空白文字（タブ、改行、改行、垂直タブ、フォームフィード）を1回と無制限の時間で一致させます。』 ↑ Match a single whitespacecharacter (tab, line feed, carriage return, vertical tab, form feed) between one and unlimmited times. でも、 (/\s/)のことは載っていませんでした。 [0]は、どいうことかな？ あと、『1つの空白文字（タブ、改行、改行、垂直タブ、フォームフィード）を1回と無制限の時間で一致させます。』を読んでもどういうことか？は分かりませんでした。 (3) switch(pos)は、条件分岐するものですが、switch(pos) { }の中身が難しくてどういう働きするのか？の分析ができませんでした。 頑張って調べても分からないことがありましたので、すみませんが、よろしくお願いします。
- amaryllis_watch
- お礼率0% (0/9)
- JavaScript
- 回答数9
- ありがとう数2
- みんなの回答 （9）
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
- think49
- ベストアンサー率59% (285/482)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
丸投げだと嫌だ！
補足
htmlが <table> <tr> <th>区画名</th> <th>面積</th> <th>坪数</th> <th>価格</th> <th>坪単価</th> </tr> <tr> <td><input type="text" name="se01_a" class="se_a" value=""></td> <td><input type="text" name="se01_b" value="" class="se_b"> m2</td> <td><input type="text" name="se01_c" value="" class="se_c tsubo"> 坪</td> <td><input type="text" name="se01_d" value="" class="se_d kingaku"> 万円</td> <td class="result"><span class="tubotan"></span></td> </tr> <tr> 上記の同じコードを5セット～10セット </tr> </table> にして、javascriptは、 var inputs = document.getElementsByTagName('input'); for (var i=0; i < inputs.length; i ++ ) { inputs[i].addEventListener('input', inputHandler); } function inputHandler(e) { var value = 0; var row = e.target.parentNode.parentNode; var pos = e.target.className.split(/\s/)[0]; switch(pos) { case 'se_b': e.target.value = e.target.value.replace(/[^0-9.]/,''); if (/^[0-9]*(\.[0-9]*)?$/.test(e.target.value)) { value = Number(e.target.value); e.target.className = e.target.className.replace(' error',''); price({ se_b: value, row }); } else { if (e.target.className.indexOf('error') < 0) e.target.className += ' error'; row.getElementsByClassName('tsubo')[0].innerHTML = ''; row.getElementsByClassName('kingaku')[0].innerHTML = ''; } break; case 'se_c': value = Number(e.target.value.replace(/[^0-9]/g,'')); e.target.value = value > 0 ? value.toLocaleString('ja-JP') : ''; price({ se_c: value, row }); break; case 'se_d': value = Number(e.target.value.replace(/[^0-9]/g,'')); e.target.value = value > 0 ? value.toLocaleString('ja-JP') : ''; price({ se_d: value, row }); break; default: break; } } function price({se_b, se_c, se_d, row }) { if (!row) return; var se01bNode = row.getElementsByClassName('se_b')[0]; var se01cNode = row.getElementsByClassName('se_c')[0]; var se01dNode = row.getElementsByClassName('se_d')[0]; se_b = (se_b >= 0 ? se_b : Number(se01bNode.value)); se_c = (se_c >= 0 ? se_c : Number(se01cNode.value.replace(/[^0-9]/g,''))); se_d = (se_d >= 0 ? se_d : Number(se01dNode.value)); var tsubo = se_b * 0.3025; var kingaku = tsubo * se_c; var tsubotan = se_d / se_c; tsubo = Math.floor(tsubo * 10.0) / 10.0; // 少数点第2位以下を切り捨て var tsuboNode = row.getElementsByClassName('tsubo')[0]; var kingakuNode = row.getElementsByClassName('kingaku')[0]; var tsubotanNode = row.getElementsByClassName('tsubotan')[0]; tsuboNode.innerHTML = (tsubo > 0 ? `${tsubo}` : ''); kingakuNode.innerHTML = (kingaku > 0 ? `${kingaku.toLocaleString('ja-JP')}` : ""); tsubotanNode.innerHTML = (tsubotanNode > 0 ? `${tsubotanNode}` : ''); } にしてみたけど全然ダメです。 リアルタイムに計算されてない。 あと、se_cの坪数に小数点入力ができない。 私はjavascriptに詳しくなく、あのままのコードに追加や関数の一部に変更くらいしかできずにしています。 本当は、se_bとse_cとse_dは通常入力で「se_d / se_c」で計算したのを<span class="tubotan"></span>に表示するコードにしたかったが、できなかった。
- babu_baboo
- ベストアンサー率51% (268/525)
ちょっとだけ解説 イベントは親要素(document)で監視する。今回は #T イベントが発生したらそのイベントが発生した要素を取得する input要素なのだからちょっと省いて、親の親 tr を取得 その tr 要素の子の中から input要素を抜き出す input要素の番号を指定しながら計算する 結果を書き出す input要素に個別にイベントを貼りつけるなんてあほらしい classの指定もマジソレ必要？ってかんじ。
補足
https://jsfiddle.net/jun68ykt/p2uj40xn/43/は、他の人に作ってもらったんで、それを自分なりに変えようとしても、難しくてとても出来ませんでした。 変えても自動計算で表示も出来ない。 どれかが悪いのかも分からない。 申し訳ございませんが、どのようなコードにするかを教えて頂けませんでしょうか。
- babu_baboo
- ベストアンサー率51% (268/525)
- babu_baboo
- ベストアンサー率51% (268/525)
ずいぶん面倒なコードですね。簡単にしてみました。 <!DOCTYPE html> <meta charset="UTF-8"> <html lang="ja"> <title>?</title> <style> #T input {text-align: right; } #T tr td:first-of-type input { color: red; } #T tr td:nth-of-type(2) input { color: blue; } #T tr td:nth-of-type(3) input { color: green; } </style> <body> <table id="T"> <tr> <th>金額(円) <th>坪数 <th>坪単価(円/坪) <tr> <td><input> <td><input> <td><input readonly> <tr> <td><input> <td><input> <td><input readonly> </table> <script> const table = document.querySelector ('#T'), getNum = e => parseFloat (e.value), handler = (event) => { let inp = event.target, tr = inp.parentNode.parentNode, inps = tr.querySelectorAll ('input'), tubotanka = getNum (inps[0]) / getNum (inps[1]), rst = isNaN (tubotanka) ? 'error' : tubotanka.toFixed (2) + ' 円'; inps[2].value = rst; } table.addEventListener ('input', handler, false); </script>
補足
babu_babooさん、回答をありがとうございます。 訳あって、同じようなのを5～10セット作る必要があって、 javascritでは、「row」を使っています。 そして、質問した「価格(○○.○○万円)÷坪数(○○.○○坪)＝坪単価で計算するjavascriptに直す」ためにjavascriptを直す際、そのコードはどういった動きやイベント発生などを調べて直していますが、私の知識では、ハードルが高くて、まだ直せていません。 https://jsfiddle.net/jun68ykt/p2uj40xn/43/では、 <tr> <th></th> <th>平米数(m2)</th> <th class="result">坪数</th> <th>坪単価(円/坪)</th> <th class="result">金額(円)</th> </tr> <tr> <td><input type="text" class="se_a" value=""></td> <td><input type="text" value="" class="se_b"></td> <td class="result"><span class="tsubo"></span></td> <td><input type="text" value="" class="se_c"></td> <td class="result"><span class="kingaku"></span></td> </tr> ↑ それを <tr> <th>区画名</th> <th>面積</th> <th>坪数</th> <th>価格</th> <th>坪単価</th> </tr> <tr> <td><input type="text" class="se_a" value=""></td> <td><input type="text" value="" class="se_b"> m2</td> <td><input type="text" value="" class="se_c"> 坪</td> <td><input type="text" value="" class="se_d"> 万円</td> <td class="result"><span class="tubotan"></span></td> </tr> に変更する。 javascriptで計算は、「tubotan = se01_d * se_c」にして、 「.getElementsByClassName('tubotan')」で <span class="tubotan"></span>に表示させる方法に変えるんです。 そのためにどうすれば、どこをどのように変えるか？をインターネットで調べていた。
- t_ohta
- ベストアンサー率38% (5320/13881)
補足
ありがとうございます。 スマホでテストしてみました。 正常に働きましたが、会社のPCは、IE系ブラウザを使用しているので、IE系ブラウザでテストしたら、面積のinputに入力すると「×」が表示され、リアルタイム計算出来ません。 Google chromeは未確認です。