javascriptでID指定場所に税込み合計を表示する方法
- 外部javascriptを使用して、ID指定場所に税抜き合計と税込み合計を表示する方法についてご質問です。
- 現在税抜き合計までは対応していますが、税込み合計の表示方法が分からない状況です。
- 商品の金額にはコンマが付いており、合計金額にもコンマを付与したいとのことです。
- ベストアンサー
javascriptでID指定場所に税込み合計を
前回の質問が分かり難かったので、改めてご質問させていただきます。 外部javascriptでID指定場所に税抜き合計と税込み合計を表示したいです。 現在税抜き合計までは対応しています。(下記参照) お教えいただけましたら幸甚です。 商品１ <span id="suuji1">5,000</span> 商品２ <span id="suuji2">500</span> ・・・ 商品９ <span id="suuji9">2,000</span> 税抜き合計 <span id="total">ここに自動で表示</span> 税込み合計 <span id="zeikomi">ここに自動で表示</span> ※小数点以下切り捨て 商品の金額にはコンマが付いております。 合計金額にもコンマを付与したいです。9000→9,000 以上何卒宜しくお願い申し上げます。 ＜現在のソース＞ var preOnload = window.onload; window.onload = function() { if(preOnload){ preOnload() } var n=document.getElementsByTagName("span"); var v=0; for(var i=0;i<n.length;i++){ if(n[i].id.match(/^suuji[0-9]+$/)){ v +=parseInt(n[i].innerHTML.replace(/,/g,'')); } } var num=v.toString(); while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); document.getElementById("total").innerHTML=num; }
- gorowaka
- お礼率25% (3/12)
- JavaScript
- 回答数9
- ありがとう数5
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
>r = r.replace(/([0-9]{3})$/g, ",$1"); 7桁以上だと正常に表示できませんでした。 >shouhinの次に来る番号は何であっても使えるものでないと無理の様です。 番号は何であっても使えるようにしました。 >shouhin2の次が同じshouhin2(同じ番号が複数)の場合もあり 下記は同じidが複数ある場合も一応動作しますが、(あくまでも一応動作と言うだけで)同じidが複数あると正常な動作は保障されません(HTMLの仕様です)。 charsetはUTF-8です、「<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">」でcharsetを設定しています。 「js」ファイルは漢字を使ってないのでcharsetに関係なく「Shift-JIS、UTF-8」の どちらで保存してもOKです。 エラー処理は何もしてません、実用的にするにはエラー処理が必要です。 100倍して計算して(正規表現も使用して)ますが、浮動小数点演算の誤差に対応するために必須です。 浮動小数点演算の誤差に関しては下記のページを参照して下さい。 javascriptで浮動小数点の問題 https://okwave.jp/qa/q9502173.html 【HTMLファイル】 ※「<script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script>」でJSファイルをロードしています。 ※「<body onload="onBodyLoad()" >」で「onBodyLoad()」関数を起動しています。 <head> <script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- charset=Shift-JIS、UTF-8 --> <TITLE>test</TITLE> </head> <body onload="onBodyLoad()" > <script type="text/javascript"> <!-- function onBodyLoad(){ ZeiKeisan(); } // --> </script> <span id="shouhin1">1</span><br> <span id="shouhin2">2</span><br> <span id="shouhin2">3</span><br> <span id="shouhin4">4</span><br> <span id="shouhin4">5</span><br> <span id="shouhin4">6</span><br> <span id="shouhin7">7</span><br> <span id="shouhin7">8</span><br> <span id="shouhin7">9</span><br> <span id="shouhin7">1,234,567</span><br> <br> zeinuki=<span id="total"></span><br> zeikomi=<span id="zeikomi"></span><br> </body> </html> 【JSファイル】ファイル名は「Hyouhizei.js」 ※商品価格は「span」タグのidの「shouhin～」をチェックしているだけなので、商品価格以外でidに「shouhin～」を使っていると正常に動作しません。 var Zeiritu100 = 8; function ZeiKeisan(){ var r,zTotalPrice,zKom,zFirstName,zInitial,zObjNuki,zObjKomi,zIDNuki,zIDKomi,zQuantity,zObj,zObjHhouhin,msg; zObjHhouhin = new Array(); zObjSpan = document.getElementsByTagName("span"); zQuantity = 0; msg = ""; for(var i = 0; i<zObjSpan.length; i++){ r = zObjSpan[i].id; if(r.match(/^shouhin/)){ msg += zObjSpan[i].id+"; "; zObjHhouhin[zObjHhouhin.length] = zObjSpan[i]; // zQuantity++; } } zQuantity = zObjHhouhin.length; zFirstName = "shouhin"; zInitial = 1; zIDNuki = "total"; zIDKomi = "zeikomi"; zTotalPrice = TotalPrice(zObjHhouhin); zKomi = ZeiriKomi(zTotalPrice); r = String(zTotalPrice); r = r.replace(/([0-9]{1,2})(([0-9]{3})*)$/g, "$1,$2"); r = r.replace(/([0-9]{3})/g, ",$1"); r = r.replace(/(\,+)/g, ","); r = r.replace(/(^\,|\,$)/g, ""); zObjNuki = document.getElementById(zIDNuki); zObjNuki.innerHTML = r; r = String(zKomi); r = r.replace(/([0-9]{1,2})(([0-9]{3})*)$/g, "$1,$2"); r = r.replace(/([0-9]{3})/g, ",$1"); r = r.replace(/(\,+)/g, ","); r = r.replace(/(^\,|\,$)/g, ""); zObjKomi = document.getElementById(zIDKomi); zObjKomi.innerHTML = r; } function TotalPrice(zObjHhouhin){ var r,zPrice,zTotalPrice; zTotalPrice = 0; for(var i = 0; i<zObjHhouhin.length; i++){ zPrice = zObjHhouhin[i].textContent; r = zPrice; r = r.replace(/([0-9]*)\,?/g, "$1"); zTotalPrice += Number(r); } return zTotalPrice; } function ZeiriKomi(zTotalPrice){ var r,zKomi100,zKomi; zKomi100 = String(zTotalPrice*(100+Zeiritu100)); r = zKomi100; r = r.replace(/([0-9]*)([0-9]{2})(\.|$)/g, "$1.$2"); r = r.replace(/([0-9]*)\.([0-9]*)/g, "$1"); zKomi = Number(r); return zKomi; }
その他の回答 (8)
- amanojaku1
- ベストアンサー率54% (265/488)
>回答No.8 amanojaku1 JSファイル >r = r.replace(/([0-9]{1,2})(([0-9]{3})*)$/g, "$1,$2"); >r = r.replace(/([0-9]{3})/g, ",$1"); >r = r.replace(/(\,+)/g, ","); >r = r.replace(/(^\,|\,$)/g, ""); ↑これが２つ有りますが、２つとも下記のように変更したほうが、正規表現的にチョッピリ スマートでしょう。 r = r.replace(/^([0-9]{1,2})(([0-9]{3})+)$/g, "$1,$2"); r = r.replace(/([0-9]{3})/g, "$1,"); r = r.replace(/(^\,|\,$)/g, "");
- amanojaku1
- ベストアンサー率54% (265/488)
>ダイアログが出てきて正常に動作しませんでした。 デバッグ用です、「alert(～)」を削除すれば良いだけですよ。 「alert(～)」を削除しました。 >shouhinの次に来る番号は何であっても使えるものでないと無理の様です。 番号は何であっても使えるようにしました。 >shouhin2の次が同じshouhin2(同じ番号が複数)の場合もあり 下記は同じidが複数ある場合も一応動作しますが、(あくまでも一応動作と言うだけで)同じidが複数あると正常な動作は保障されません(HTMLの仕様です)。 charsetはUTF-8です、「<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">」でcharsetを設定しています。 「js」ファイルは漢字を使ってないのでcharsetに関係なく「Shift-JIS、UTF-8」の どちらで保存してもOKです。 エラー処理は何もしてません、実用的にするにはエラー処理が必要です。 100倍して計算して(正規表現も使用して)ますが、浮動小数点演算の誤差に対応するために必須です。 浮動小数点演算の誤差に関しては下記のページを参照して下さい。 javascriptで浮動小数点の問題 https://okwave.jp/qa/q9502173.html 【HTMLファイル】 ※「<script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script>」でJSファイルをロードしています。 ※「<body onload="onBodyLoad()" >」で「onBodyLoad()」関数を起動しています。 <head> <script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- charset=Shift-JIS、UTF-8 --> <TITLE>test</TITLE> </head> <body onload="onBodyLoad()" > <script type="text/javascript"> <!-- function onBodyLoad(){ ZeiKeisan(); } // --> </script> <span id="shouhin1">10</span><br> <span id="shouhin2">20</span><br> <span id="shouhin2">30</span><br> <span id="shouhin4">40</span><br> <span id="shouhin4">50</span><br> <span id="shouhin4">60</span><br> <span id="shouhin7">70</span><br> <span id="shouhin7">80</span><br> <span id="shouhin7">90</span><br> <span id="shouhin7">12,345</span><br> <br> zeinuki=<span id="total"></span><br> zeikomi=<span id="zeikomi"></span><br> </body> </html> 【JSファイル】ファイル名は「Hyouhizei.js」 ※商品価格は「span」タグのidの「shouhin～」をチェックしているだけなので、商品価格以外でidに「shouhin～」を使っていると正常に動作しません。 var Zeiritu100 = 8; function ZeiKeisan(){ var r,zTotalPrice,zKom,zFirstName,zInitial,zObjNuki,zObjKomi,zIDNuki,zIDKomi,zQuantity,zObj,zObjHhouhin,msg; zObjHhouhin = new Array(); zObjSpan = document.getElementsByTagName("span"); zQuantity = 0; msg = ""; for(var i = 0; i<zObjSpan.length; i++){ r = zObjSpan[i].id; if(r.match(/^shouhin/)){ msg += zObjSpan[i].id+"; "; zObjHhouhin[zObjHhouhin.length] = zObjSpan[i]; // zQuantity++; } } zQuantity = zObjHhouhin.length; zFirstName = "shouhin"; zInitial = 1; zIDNuki = "total"; zIDKomi = "zeikomi"; zTotalPrice = TotalPrice(zObjHhouhin); zKomi = ZeiriKomi(zTotalPrice); r = String(zTotalPrice); r = r.replace(/([0-9]{3})$/g, ",$1"); zObjNuki = document.getElementById(zIDNuki); zObjNuki.innerHTML = r; r = String(zKomi); r = r.replace(/([0-9]{3})$/g, ",$1"); zObjKomi = document.getElementById(zIDKomi); zObjKomi.innerHTML = r; } function TotalPrice(zObjHhouhin){ var r,zPrice,zTotalPrice; zTotalPrice = 0; for(var i = 0; i<zObjHhouhin.length; i++){ zPrice = zObjHhouhin[i].textContent; r = zPrice; r = r.replace(/([0-9]*)\,?/g, "$1"); zTotalPrice += Number(r); } return zTotalPrice; } function ZeiriKomi(zTotalPrice){ var r,zKomi100,zKomi; zKomi100 = String(zTotalPrice*(100+Zeiritu100)); r = zKomi100; r = r.replace(/([0-9]*)([0-9]{2})(\.|$)/g, "$1.$2"); r = r.replace(/([0-9]*)\.([0-9]*)/g, "$1"); zKomi = Number(r); return zKomi; }
- babu_baboo
- ベストアンサー率51% (268/525)
どっかで nfmt という変数もしくは定数を使っているから。 -- まず1つのHTMLで外部読み込みをしない最小限の状態でためす。 -- もう動かないのなら、他の方を参考に。
補足
この度は、大変お世話になっております。 同じようにシンタックスエラーが出てしまいうまく動作しませんでした。 この度は、いろいろとお教えいただき、本当に有難うございました。
- babu_baboo
- ベストアンサー率51% (268/525)
#2です 訂正します。が、動かないでしょうね。ブラウザの対象がわからないし。 数行の短いコードなのだから、理解しようとすべき。 長けりゃ良いってモノでもないし。 nfmt = n => String (n.toFixed(0)).replace (/^([-+]?\d+)(?=\.|$)/, s => s.replace (/(\d+?)(?=(?:\d{3})+$)/g, '$1,'));
補足
この度は、大変お世話になっております。 ブラウザはクロームとファイアーフォックスで確認しています。 外部javascriptファイルにソースをカット＆ペーストし、呼び出しましたが動作しませんでした。 ご面倒をおかけし誠に申し訳ございませんでした。
- amanojaku1
- ベストアンサー率54% (265/488)
>shouhinの次に来る番号は何であっても使えるものでないと無理の様です。 番号は何であっても使えるようにしました。 >shouhin2の次が同じshouhin2(同じ番号が複数)の場合もあり 下記は同じidが複数ある場合も一応動作しますが、(あくまでも一応動作と言うだけで)同じidが複数あると正常な動作は保障されません(HTMLの仕様です)。 charsetはUTF-8です、「<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">」でcharsetを設定しています。 「js」ファイルは漢字を使ってないのでcharsetに関係なく「Shift-JIS、UTF-8」の どちらで保存してもOKです。 エラー処理は何もしてません、実用的にするにはエラー処理が必要です。 100倍して計算して(正規表現も使用して)ますが、浮動小数点演算の誤差に対応するために必須です。 浮動小数点演算の誤差に関しては下記のページを参照して下さい。 javascriptで浮動小数点の問題 https://okwave.jp/qa/q9502173.html 【HTMLファイル】 ※「<script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script>」でJSファイルをロードしています。 ※「<body onload="onBodyLoad()" >」で「onBodyLoad()」関数を起動しています。 <head> <script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- charset=Shift-JIS、UTF-8 --> <TITLE>test</TITLE> </head> <body onload="onBodyLoad()" > <script type="text/javascript"> <!-- function onBodyLoad(){ ZeiKeisan(); } // --> </script> <span id="shouhin1">10</span><br> <span id="shouhin2">20</span><br> <span id="shouhin2">30</span><br> <span id="shouhin4">40</span><br> <span id="shouhin4">50</span><br> <span id="shouhin4">60</span><br> <span id="shouhin7">70</span><br> <span id="shouhin7">80</span><br> <span id="shouhin7">90</span><br> <span id="shouhin7">12,345</span><br> <br> zeinuki=<span id="total"></span><br> zeikomi=<span id="zeikomi"></span><br> </body> </html> 【JSファイル】ファイル名は「Hyouhizei.js」 ※商品価格は「span」タグのidの「shouhin～」をチェックしているだけなので、商品価格以外でidに「shouhin～」を使っていると正常に動作しません。 var Zeiritu100 = 8; function ZeiKeisan(){ var r,zTotalPrice,zKom,zFirstName,zInitial,zObjNuki,zObjKomi,zIDNuki,zIDKomi,zQuantity,zObj,zObjHhouhin,msg; zObjHhouhin = new Array(); zObjSpan = document.getElementsByTagName("span"); zQuantity = 0; msg = ""; for(var i = 0; i<zObjSpan.length; i++){ r = zObjSpan[i].id; if(r.match(/^shouhin/)){ msg += zObjSpan[i].id+"; "; zObjHhouhin[zObjHhouhin.length] = zObjSpan[i]; // zQuantity++; } } alert(msg+"\n"+ ""); zQuantity = zObjHhouhin.length; zFirstName = "shouhin"; zInitial = 1; zIDNuki = "total"; zIDKomi = "zeikomi"; zTotalPrice = TotalPrice(zObjHhouhin); zKomi = ZeiriKomi(zTotalPrice); r = String(zTotalPrice); r = r.replace(/([0-9]{3})$/g, ",$1"); zObjNuki = document.getElementById(zIDNuki); zObjNuki.innerHTML = r; r = String(zKomi); r = r.replace(/([0-9]{3})$/g, ",$1"); zObjKomi = document.getElementById(zIDKomi); zObjKomi.innerHTML = r; } function TotalPrice(zObjHhouhin){ var r,zPrice,zTotalPrice; zTotalPrice = 0; for(var i = 0; i<zObjHhouhin.length; i++){ zPrice = zObjHhouhin[i].textContent; r = zPrice; r = r.replace(/([0-9]*)\,?/g, "$1"); zTotalPrice += Number(r); } return zTotalPrice; } function ZeiriKomi(zTotalPrice){ var r,zKomi100,zKomi; zKomi100 = String(zTotalPrice*(100+Zeiritu100)); r = zKomi100; r = r.replace(/([0-9]*)([0-9]{2})(\.|$)/g, "$1.$2"); r = r.replace(/([0-9]*)\.([0-9]*)/g, "$1"); zKomi = Number(r); return zKomi; }
補足
誠に申し訳ございません。 ダイアログが出てきて正常に動作しませんでした。 ご確認いただけましたら幸いです。
- amanojaku1
- ベストアンサー率54% (265/488)
charsetはUTF-8です、「<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">」でcharsetを設定しています。 「js」ファイルは漢字を使ってないのでcharsetに関係なく「Shift-JIS、UTF-8」の どちらで保存してもOKです。 エラー処理は何もしてません、実用的にするにはエラー処理が必要です。 【HTMLファイル】 「<script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script>」でJSファイルをロードしています。 「<body onload="onBodyLoad()" >」で「onBodyLoad()」関数を起動しています。 「ZeiKeisan(10)」でデータの個数を指定しています。 <head> <script language="JavaScript" type="Text/JavaScript" src="Hyouhizei.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <!-- charset=Shift-JIS、UTF-8 --> <TITLE>test</TITLE> </head> <body onload="onBodyLoad()" > <script type="text/javascript"> <!-- function onBodyLoad(){ ZeiKeisan(10); // ←データの個数を指定。 } // --> </script> <span id="shouhin1">10</span><br> <span id="shouhin2">20</span><br> <span id="shouhin3">30</span><br> <span id="shouhin4">40</span><br> <span id="shouhin5">50</span><br> <span id="shouhin6">60</span><br> <span id="shouhin7">70</span><br> <span id="shouhin8">80</span><br> <span id="shouhin9">90</span><br> <span id="shouhin10">12,345</span><br> <br> zeinuki=<span id="total"></span><br> zeikomi=<span id="zeikomi"></span><br> </body> </html> 【JSファイル】ファイル名は「Hyouhizei.js」 var Zeiritu100 = 8; function ZeiKeisan(zQuantity){ var r,zTotalPrice,zKom,zFirstName,zInitial,zObjNuki,zObjKomi,zIDNuki,zIDKomi; zFirstName = "shouhin"; zInitial = 1; zIDNuki = "total"; zIDKomi = "zeikomi"; zTotalPrice = TotalPrice(zFirstName,zInitial,zQuantity); zKomi = ZeiriKomi(zTotalPrice); r = String(zTotalPrice); r = r.replace(/([0-9]{3})$/g, ",$1"); zObjNuki = document.getElementById(zIDNuki); zObjNuki.innerHTML = r; r = String(zKomi); r = r.replace(/([0-9]{3})$/g, ",$1"); zObjKomi = document.getElementById(zIDKomi); zObjKomi.innerHTML = r; } function TotalPrice(zFirstName,zInitial,zQuantity){ var r,zPrice,zTotalPrice; zTotalPrice = 0; for(i = zInitial; i<zInitial+zQuantity; i++){ zPrice = document.getElementById(zFirstName+i).textContent; r = zPrice; r = r.replace(/([0-9]*)\,?/g, "$1"); zTotalPrice += Number(r); } return zTotalPrice; } function ZeiriKomi(zTotalPrice){ var r,zKomi100,zKomi; zKomi100 = String(zTotalPrice*(100+Zeiritu100)); r = zKomi100; r = r.replace(/([0-9]*)([0-9]{2})(\.|$)/g, "$1.$2"); r = r.replace(/([0-9]*)\.([0-9]*)/g, "$1"); zKomi = Number(r); return zKomi; }
補足
お手数にも関わりませず、何度も有難うございます。 ただ、shouhin1の次がshouhin2とは限らず、shouhin4の場合もあります。 また、shouhin2の次が同じshouhin2(同じ番号が複数)の場合もあり、shouhin3が最初でshouhin1がその後にくる場合もございます。 そのため、shouhinの次に来る番号は何であっても使えるものでないと無理の様です。(番号は最大で9です。無理な場合shouhinの後の番号は何とか消すことは可能です。) 恐縮ですが何卒宜しくお願い申し上げます。
- babu_baboo
- ベストアンサー率51% (268/525)
<script> const tax = 0.08, nfmt = n => String (Math.ceil (n)).replace (/^([-+]?\d+)(?=\.|$)/, s => s.replace (/(\d+?)(?=(?:\d{3})+$)/g, '$1,')); let goukei = [...document.querySelectorAll ('span[id^="suuji"]')] .map (e => parseFloat (e.textContent.replace (/,/g, ''))) .reduce ((a, b) => a + b, 0); document.querySelector ('#total').textContent = nfmt (goukei); document.querySelector ('#zeikomi').textContent = nfmt (goukei * (1 + tax)); </script> </body>
補足
早々のご回答ありがとうございます。 最初のnfmt = n =>行にシンタックスエラーがあるそうでうまく動作しませんでした。 ご確認いただけましたら幸いです。
- t_ohta
- ベストアンサー率38% (5085/13292)
補足
すみません。 現在のjavascriptもこちらでお世話になったもので、私自身javascriptに関しては素人のため分かりません。
関連するQ&A
- javascript税抜き合計と税込み合計を表示
htmlにjavascriptで税抜き合計と税込み合計を自動で表示したいです。 お教えいただけましたら幸甚です。 商品１ <span id="shouhin1">500</span> 商品２ <span id="shouhin2">500</span> ・・・ 商品９ <span id="shouhin9">500</span> ※商品1だけの場合もあります。 税抜き合計 <span id="zeinuki">ここに自動で表示</span> 税込み合計 <span id="zeikomi">ここに自動で表示</span> ※消費税は小数点以下切り捨てでお願いします。 以上何卒宜しくお願い申し上げます。
- 締切済み
- JavaScript
- id指定した数値同士を合計計算し表示する方
素人の投稿ですみませんがご教授いただけましたら幸いです。 id指定した数値同士を自動で合計計算し表示する事は出来ますでしょうか？ やりたいことで一番近かった投稿は以下のものです。 「テーブル内に表示されている数字の自動計算について」 http://okwave.jp/qa/q5295498.html 上記の場合、テーブルセルの縦列の合計が自動で表示されるのですが、既にWEBサイトが出来上がっており新たにテーブルを組み込むことが出来ません。 例えばidを使用し <span id="suuji">10000</span> <span id="suuji">20000</span> <span id="total">30000</span> という風にid=suujiで指定した数値をid=total指定した場所へ合計表示させることは出来ますでしょうか？ 出来ればid=suujiは1つだけの方が有難いのですが、難しければsuuji1、suuji2、suuji3と分かれても構いません。 お忙しい中、大変難しいご質問ですが何卒宜しく御願い致します。
- ベストアンサー
- JavaScript
- ループ、プログラムなのに！？
以下のプログラムは、ただの乗算と、その合計を計算するだけなのに、なんでfor (var i = 1; i < 4; i++) { のループ、プログラムなのですか？ もし同じ計算結果のダイアログBOXで、Javaの範疇で組むのであれば、他にどんなプログラムがあるのですか？ よろしくお願いします。 <HTML> <HEAD> <TITLE>ループ</TITLE> <script tytpe="text/javascript"> <!-- function calc(){ var alltotal = 0; for (var i = 1; i < 4; i++) { var price = document.getElementById("price" + i).innerHTML; var num = document.getElementById("num" + i).value; var total = price * num; document.getElementById("total" + i).innerHTML = total; alltotal += total; } document.getElementById("alltotal").innerHTML = alltotal; } </script> </HEAD> <body> <p><span id="price1">100</span><input id="num1" value="0" /><span id="total1">1の合計</span></p> <p><span id="price2">200</span><input id="num2" value="0" /><span id="total2">2の合計</span></p> <p><span id="price3">300</span><input id="num3" value="0" /><span id="total3">3の合計</span></p> <div id="alltotal">合計</div> <button onclick="calc()">計算</button> </body> </HTML>
- ベストアンサー
- JavaScript
- javascriptの文字列置換
例えば aaという入力文字列に対し、結果として <span id=1>a</span><span id=2>a</span> というように、ここの「a」に関してidによる区別を行いつつ、置換を行いたいです。 現在、下記のコードのように書いていて、 indexSet=[a, 0, b, 1, c, 2] という配列になっています。 var num = 0; for (var i = 0; i < indexSet.length; i+=2) { var subjectKeyword = new RegExp( indexSet[i], "g" ); if( Body.match(subjectKeyword) ){ Body = Body.split( indexSet[i] ).join( '<span id=' + indexSet[i+1] + '-' + num + '>' + indexSet[i] + '</span>' ); num++; } else { Body = Body; } } 欲しい結果は <span id=1-1>a</span><span id=1-2>a</span> なのですが、上記のコードでは <span id=1-1>a</span><span id=1-1>a</span> と、全てのaに対して同時処理を行っているように見えます。 どのように改善すればよいのかわかりません。どうか力を貸していただけませんか？
- 締切済み
- JavaScript
- Javascript+PHPでのデータの受け渡し
はじめまして。PHP＋MYSQLについては、まだ知識があるものの、Javascriptについては 初心者で知識不足の者です。 twitterのフォローのようなプログラムをphp+mysqlで作成したのですが これをJavascriptを使用して、ユーザーには画面をまたがずに 「フォローする」⇒「フォローしました」 とさせたいのですが、どうすればよいか行き詰ってしまいました。 ちなみに、php+mysqlのみでは現在下記のとおりになっています。 ■フォロー登録画面 <form name="register" action="adduser.php" method="post"> <input name="account_id" type="hidden" value="<?= $_SESSION['users_id'] ?>"> <input name="follow_id" type="hidden" value="<?php varout($users['users_id']) ?>"> <input name="subtitle" type="hidden" value="$subtitle"> <input type="submit" value="フォローする"> ■mysqlへinsertする画面（adduser.php） $query = "INSERT INTO watchuser SET user_from=?,user_to=?,created_at=NOW()"; execQuery($db, $query, array($account_id, $follow_id)); javascriptで制御する為に フォロー登録画面を下記にように変更し、 <a href="javascript:follow('<?php varout($users['users_id']) ?>');" class="btnBlue" title="フォローする">フォローする</a> javascript内に、下記のように記述しているのですが 動作せずに困っております。 どなたかお詳しい方、ご連絡いただけますと幸いです。 ※【補足】jqueryは、jquery-1.7.1.min.jsを読み込んでいます function follow(account) { var url ='/adduser.php'; var data = 'account=' + account; var btn = $('follow_btn'); var follower_num = $('follow_id'); if (follower_num != null) { var follower_num_value = parseInt(follower_num.innerHTML); } new Ajax.Request(url, { method: 'post', parameters: data, onLoading: function() { btn.innerHTML = '<img src="/images/loading.gif" />'; }, onComplete: function(httpObj) { if (httpObj.status == '200') { btn.innerHTML = '<span class="btnRed">フォローしました！</span>'; if (follower_num != null) { follower_num.innerHTML = follower_num_value + 1; } } else { var res = httpObj.responseText; if (res) { btn.innerHTML = '<span class="error">' + res + '</div>'; } else { btn.innerHTML = '<span class="error">エラー</div>'; } } } }); }
- 締切済み
- JavaScript
- PHP内にJavaScript
下記のようなはじめての訪問者に対してようこそ！と表示するJavaScriptをPHP内で動かすにはどのように記入すればよいのでしょうか？ ==================================================== <script language="JavaScript"> var key = "freekeyword"; var n = 0; var cookies = document.cookie.split("; "); for(var i=0;i<cookies.length;i++){ var str = cookies[i].split("="); if(str[0] == key){ // n = str[1]; } } window.onload = function() { if(n == 0){ document.getElementById('welcome').innerHTML = 'ようこそ！'; } n++; setCookie(key,n); } function setCookie(key,val){ document.cookie = key + "=" + escape(val) + "; "; } </script> ==================================================== このスクプリトを下記<head>内にどのように記入すればよいので しょうか？ PHPの文法などほとんど分からないレベルなのでそもそも質問 自体間違ってるかもしれませんがPHP内で同様の動作をさせたい のです。よろしくお願いします ==================================================== <?php echo ' <html> <head> </head>'; echo ' <body> <div id="welcome"></div> </body></html>'; ?> ====================================================
- ベストアンサー
- PHP
- 同じメソッドを複数回、呼び出しは可能でしょうか
<script> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } window.onload = function (){ if(01 == arg.id){document.getElementById("type").innerHTML = "あなたはＡ型";} else if(02 == arg.id){document.getElementById("type").innerHTML = "あなたはＢ型";} else if(03 == arg.id){document.getElementById("type").innerHTML = "あなたはＯ型";} else if(04 == arg.id){document.getElementById("type").innerHTML = "あなたはＡＢ型";} else {document.getElementById("type").innerHTML = "わかりません";} } </script> サイトへの表示は <span id="type"></span> と記述することで、問題なく表示ることができています。 しかし、これを複数個所に記述すると 最初の箇所しか表示しません。 同じページの複数の箇所（希望は４か所）に表示させるためには、 どのようにすればよいのでしょうか。
- ベストアンサー
- JavaScript
- javascriptで困っています
スマホでタッチした場所の座標を取得しようとしているのですが、いろいろ調べて以下のように作ってみましたが、座標が取得できません。どこを直せばいいのか、教えていただきたく投稿させていただきました。よろしくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"/> <meta name="viewport" content="width=320, user-scalable=no" /> <script type="text/javascript" charset="utf-8"> var touch_box = document.getElementById("box"); touch_box.addEventListener("touchstart", function(e){ document.getElementById("txt0").innerHTML = "スタート"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchmove", function(e){ document.getElementById("txt0").innerHTML = "ムーブ"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); touch_box.addEventListener("touchend", function(e){ document.getElementById("txt0").innerHTML = "エンド"; document.getElementById("txt1").innerHTML = e.pageX; document.getElementById("txt2").innerHTML = e.pageY; }, false); </script> </head> <body> <div id="box"> <span id="txt0"></span><br /> X:<span id="txt1"></span>, Y:<span id="txt2"></span><br /> </div> </body> </html>
- ベストアンサー
- JavaScript
- URLパラメータ２個同時に渡してHTMLで表記
現在、１個のURLパラメーターで「色の違い」をinnerHTMLで表記しています。 これにパラメーターを１個追加して「特徴の違い」も表記したいと考えています。 「現状」 ●サイトのURL（パラメーター１個） http://www.hogehoge.com/?id=1 http://www.hogehoge.com/?id=2 http://www.hogehoge.com/?id=3 ●JavaScript <script type="text/javascript"> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } function area(id){ if(1 == arg.id){document.getElementById(id).innerHTML = "赤い";} else if(2 == arg.id){document.getElementById(id).innerHTML = "青い";} else if(3 == arg.id){document.getElementById(id).innerHTML = "黒い";} else {document.getElementById(id).innerHTML = "白い";} } window.onload = function (){ var i; for (i=1;i<=3;i++) { /* type1～type3まで設定 */ area("type"+i); } } </script> ●HTML <div><span id="type1"></span>ポーチ</div> <div><span id="type2"></span>財布</div> <div><span id="type3"></span>カバン</div> ●サイト上の表示例（id=1の場合）３か所に表示 赤いポーチ 赤い財布 赤いカバン ◆◆「実現したいこと」◆◆ かっこいい：cool 新しい：new 古い：old ふつうの： という４つの特徴を追加したい ●サイトのURL（例） http://www.hogehoge.com/?id=1&kindid=cool ●変更後のサイト上での表示例 かっこいい赤いポーチ かっこいい赤い財布 かっこいい赤いカバン 色４つ×特徴４つの計１６パターンを URLパラメータ２個によって表示したいと考えています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- innerHTMLでHTML要素の中身を変えたい
URLでidを指定して「色の違い」を表記しています。 今の「色の違い」に追加して「特徴の違い」も表記したいと考えています。 「現状」 ●サイトのURL http://www.hogehoge.com/?id=11 http://www.hogehoge.com/?id=21 http://www.hogehoge.com/?id=31 ●JavaScript <script type="text/javascript"> var arg = new Object, p = location.search.substring(1).split('&'); for(var i=0; p[i]; i++){ var kv = p[i].split('='); arg[kv[0]] = kv[1]; } function area(id){ if(11 == arg.id){document.getElementById(id).innerHTML = "赤い";} else if(21 == arg.id){document.getElementById(id).innerHTML = "青い";} else if(31 == arg.id){document.getElementById(id).innerHTML = "黒い";} else {document.getElementById(id).innerHTML = "白い";} } window.onload = function (){ var i; for (i=1;i<=3;i++) { /* type1～type3まで設定 */ area("type"+i); } } </script> ●HTML <div><span id="type1"></span>ポーチ</div> <div><span id="type2"></span>財布</div> <div><span id="type3"></span>カバン</div> ●サイト上の表示例（id=11の場合） 赤いポーチ 赤い財布 赤いカバン ※変更したい点 「おしゃれな」 「かっこいい」 「新しい」 「古い」 という４つの特徴の違いを追加したい ※変更後のサイト上での表示例 おしゃれな赤いポーチ おしゃれな赤い財布 おしゃれな赤いカバン 色４つ×特徴４つの計１６パターンを URLのidによって表示したいと考えています。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
お礼
この度は、遅くまで何度もご対応いただき本当に有難うございました。 おかげさまで、希望していた動作を手に入れることが出来ました。 心より深く感謝申し上げます。