javascriptを外部ファイルにして、htmlに反映させる時、小数点以下を四捨五入して表示せたいです。
Math.round()を使いたいのですが、どのように組み込んだらよいのかがわかりません。
ご教示のほど、よろしくお願いいたします。
---javascript---
var total = function (price) {
var tax = 0.1;
return price + price * tax;
}
---html---
<script type="text/javascript" src="tax.js"></script>
<p id="tax"></p>
<script>
document.getElementById('tax').textContent = total(999) + '円(税込)';
</script>
No.6ベストアンサー
- 回答日時:
No5です。
>どのように組み込むのが正しいのか教えて頂けますでしょうか。
ご提示の外部スクリプトを単純に置き換えればよいだけですけれど・・・?
<script>
const
tax = 0.1, total = p => p + Math.round(p * tax);
</script>
<p id="tax"></p>
<script>
document.getElementById('tax').textContent = total(999) + '円(税込)';
</script>
>No4様の方法もクラス名を改めてつけて試したのですが、反映されません。
No4様の回答をとやかくいう資格はありませんけれど、設置方法はNo4に示されている通りです。
スクリプト中の「_」(=アンダーバー)はインデントのためのものなので、半角スペースに置き換えるか削除してあげる必要があります。
(ここの掲示板は、スペースのインデントが全て削除されてしまうので…)
何度もお助けいただき本当にありがとうございます。
教えて頂いた記述を参考に、四捨五入した数字を表示することが出来ました。
かみ砕いて教えてくださり、ありがとうございます。
>スクリプト中の「_」(=アンダーバー)はインデントのためのものなので、半角スペースに置き換えるか削除してあげる必要があります。
(ここの掲示板は、スペースのインデントが全て削除されてしまうので…)
そのようなルールがあることも知りませんでした。
こちらも教えていただきありがとうございます。
No4様、No7様(No1様)にも教えて頂いた記述を理解できるまで、少し時間が掛かりそうなので、ストアンサーを決めるまでもう少々お時間を頂けますでしょうか?
No.7
- 回答日時:
> 税率自体を関数の引数にする。
という方法の場合、どのように記述したら良いのでしょうか?例えば、ですね。
JavaScriptはクロージャが使えるんでクロージャを使う手が考えられます。
クロージャ:
https://ja.wikipedia.org/wiki/%E3%82%AF%E3%83%AD …
JavaScriptファイルのtotalと言う関数を、まずは次のように書き換えてみます。
var total = function (tax) {
return function(price) {
return Math.round(price + price * tax);
}
}
関数totalは引数tax(つまり、英語としては不正確だけど、まぁ、この場合は税率)を受け取る関数になってますが、返り値はラムダ式・・・って言い方は関数型言語のモノですが、JavaScript流に言うと無名関数を返します。
この「返されるべき無名関数」がクロージャです。今ここで、totalはクロージャを利用して「関数を返す関数」となった。
これがどういう作用があるか、と言うと、引数taxが与えられた際にそのtaxの情報は返り値の無名関数に入ります。そして「その情報を持ったまま」引数priceを待つ事になる。
と言う事は貴方の言う通り「ページによって税率を変える」と言うトリックが成り立つ事になる。
次にHTMLを次のように書き換えます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TAX</title>
</head>
<body>
<script type="text/javascript" src="tax.js"></script>
<p id="tax"></p>
<script>
foo = total(0.1); <!-- ここを追加。税率(0.1)を与えたtotalの返り値(クロージャ)によってfooが税率10%の場合を計算する関数になる -->
document.getElementById('tax').textContent = foo(999) + '円(税込)'; <!-- fooを利用して計算 -->
</script>
</body>
</html>
ページによってtotalに与える税率を変えれば、上の例で言うとfooはその与えられた税率に従って計算してくれるでしょう。
私のような無知な者に丁寧にお答えいただき本当にありがとうございます。
理解できるまでよく咀嚼したいと思います。
実際に理解できるまで少し時間が掛かりそうなので、ベストアンサーを決めるまでもう少々お時間を頂けますでしょうか?
No.5
- 回答日時:
No3です。
>教えて頂いた記述をどう組み込んだらよいでしょうか?
ご提示のスクリプト部分の書き直し版ですので、そのまま置き換えればよろしいかと。
とは言え、No4様がもう少し一般化したものをご提示なさっていますので、実装するなら、そちらの方が使いやすいのではないかと思います。
(htmlタグにクラス名をつけておけば、数値が置換される。)
度々ご回答いただきありがとうございます。
いくつか試したのですが、置き換えの方法が間違っているのか、表示がされません。No4様の方法もクラス名を改めてつけて試したのですが、反映されません。
度々で恐縮ですが、どのように組み込むのが正しいのか教えて頂けますでしょうか。何卒宜しくお願い致します。
No.4
- 回答日時:
== tax.js
// 税率
const taxRate = 10 / 100;
// 文書内に埋め込まれている金額を、税込に一律修正
document.addEventListener('DOMContentLoaded',ev=>{
_ document.querySelectorAll('.taxIncl').forEach(e=>{
_ _ var m = /(\d+)\s*(\S+)/.exec(e.textContent);
_ _ if (m) {
_ _ _ var n = parseInt(m[1],10), u = m[2];
_ _ _ var s = Math.round(n * (1+taxRate)).toString(10);
_ _ _ e.textContent = s + u + "(税込)";
_ _ }
_ });
});
== page.html
<script src="tax.js"></script>
<p class=taxIncl>999円</p>
<p class=taxIncl>39800円</p>
ご回答いただきありがとうございます。
早速試してみましたが、jsが反映されない(?)ようです。
金額が999円、39800円のままになってしまいました。
私の手違いでしたら申し訳ありません。
加筆が必要な部分などはありますでしょうか?
引き続きご教授いただけるようでしたら、よろしくお願いいたします。
No.3
- 回答日時:
こんばんは
なんだか、妙なところに拘っているみたいですけれど、とりあえず…
const
tax = 0.1, total = p => p + Math.round(p * tax);
とか・・・
ご回答いただきありがとうございます。
返事が遅くなり申し訳ありません。
説明が下手で恐縮です。
やりたい事は、複数のhtmlに書いてる金額を、税率変更があった際にjsの税率だけ変更ることで、全htmlの金額に反映するようにしたいです。
拘りは特に持っていないですが、無知故考え方が回りくどいのかもしれません。
教えて頂いた記述をどう組み込んだらよいでしょうか?
引き続きご教授の程よろしくお願いいたします。
No.2
- 回答日時:
なんか言ってることが良く分からんのですが、
> jsは外部ファイルにしたいという前提(税率が変わる可能性があるため)がありまして、個々のhtmlで、表示したい単価が変わります。
それだけ、なら税率自体を関数の引数にしちまえば良いんじゃないの?
ご回答いただきありがとうございます。
返事が遅くなり申し訳ありません。
説明が下手で恐縮です。
やりたい事は、複数のhtmlに書いてる金額を、税率変更があった際にjsの税率だけ変更すれば、全htmlに反映するようにしたいです。
税率自体を関数の引数にする。という方法の場合、どのように記述したら良いのでしょうか?
引き続きご教授いただけるようでしたら、よろしくお願いいたします。
No.1
- 回答日時:
ある計算結果を四捨五入したいのですよね?
でしたら結果が入っている変数をAとすると Math.round(A) とすればよいだけです。四捨五入した値を変数Bに入れるなら B = Math.round(A) です。
ちなみに()の中は変数名だけではなく計算式を書いてもOKです。
で。そういったことはJavascriptの入門書やネット上の解説ページに記載されています。
Googleなどで「Javascript 四捨五入」といった簡単なキーワードで検索されると解説ページがやまほど見つかるかと思います。お試しください。
参考まで。
早々にご回答頂きありがとうございます。
そして、拙い質問文で申し訳ありません。
jsは外部ファイルにしたいという前提(税率が変わる可能性があるため)がありまして、個々のhtmlで、表示したい単価が変わります。
単価表示(数字)の違う複数のhtmlに、税率の計算をするjsを読み込ませたい。と言ったら良いでしょうか。説明が下手で申し訳ないです。
「Javascript 四捨五入」といったキーワードなど、思いつくキーワードを使って検索してみたのですが、答えをみつけられずこちらに質問しました。
引き続き、良い方法がありましたらお知恵をお貸しいただけますでしょうか。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript JAVASCRIPT 2 2022/04/15 15:10
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript javascriptのちょっとした動作不良(原因は突き止めたのですが) 1 2023/06/15 19:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
プルダウンメニューを別ファイ...
-
Dreamweaver で 外部JSを読み込...
-
javascriptのalertで文字化けが...
-
エラー行の行数の不思議
-
外部.jsの内容を一部置き換えて...
-
javascriptとApacheの設定
-
リンク先のURLを記述せずに、Ja...
-
【Google Apps Script】「ライ...
-
初心者です。あまりに初歩的な...
-
Javascriptの埋め込みファイル...
-
外部jsファイルから本体の関数...
-
複数のJavascriptを1つのscrip...
-
ひとつの外部ファイルに複数の...
-
<a href="#" …>の意味を教えて...
-
<div>のタッチ状態を維持したま...
-
getElementsByNameで要素が取得...
-
プラグイン無しでContactform7...
-
SQLのWHEREで全てを質問する方法
-
ウインドウを縮小しても文字を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
javascriptとApacheの設定
-
Dreamweaver で 外部JSを読み込...
-
javascriptファイルは1つに統...
-
プルダウンメニューを別ファイ...
-
javascriptのalertで文字化けが...
-
呼出したjsファイル内で他jsフ...
-
【Google Apps Script】「ライ...
-
複数のJavascriptを1つのscrip...
-
cssにjavascriptを入れる?呼び...
-
JavascriptとJqueryを混在し記述
-
JavaScriptのエラー ( 関数の...
-
ひとつの外部ファイルに複数の...
-
javascriptの外部ファイルで行...
-
ホームディレクトリを示すチル...
-
外部ファイル名を変数で指定で...
-
JavaScript内の関数を別のファ...
-
なぜ外部jsファイルはコメント...
-
外部.jsの内容を一部置き換えて...
-
外部読み込みで動かないときの...
おすすめ情報
拙い質問文で申し訳ありません。
jsは外部ファイルにしたいという前提(税率が変わる可能性があるため)がありまして、個々のhtmlで、表示したい単価が変わります。
単価表示(数字)の違う複数のhtmlに、税率の計算をするjsを読み込ませたい。と言ったら良いでしょうか。説明が下手で申し訳ないです。
引き続き、良い方法がありましたらお知恵をお貸しいただけますでしょうか。