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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
javascriptファイルは1つに統...
-
javascriptとApacheの設定
-
あの・・JAVASCRIPT...
-
外部.jsの内容を一部置き換えて...
-
javascriptのソースの解析お願...
-
外部読み込みで動かないときの...
-
背景色をjsで指定する方法
-
javascriptを外部ファイルにて2...
-
cssにjavascriptを入れる?呼び...
-
「日記」の記述を外部ファイル...
-
$.ajaxのscriptCharsetについて
-
【Google Apps Script】「ライ...
-
<a href="#" …>の意味を教えて...
-
「jQuery」アニメーションをル...
-
Javascriptのゲームを…
-
javaに詳しい方、教えてください
-
カーソルと説明
-
Future Shop2というショッピン...
-
javascriptでのHPデザインの振...
-
"mailtoでメールの【氏名】【性...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
別ファイルのfunctionの読み込み方
-
javascriptとApacheの設定
-
Dreamweaver で 外部JSを読み込...
-
ホームディレクトリを示すチル...
-
プルダウンメニューを別ファイ...
-
javascriptファイルは1つに統...
-
JavascriptとJqueryを混在し記述
-
複数のJavascriptを1つのscrip...
-
cssにjavascriptを入れる?呼び...
-
メールフォーム、受信メールの...
-
JavaScriptのエラー ( 関数の...
-
レンタルサーバーでjavascript...
-
javascriptのalertで文字化けが...
-
外部.jsの内容を一部置き換えて...
-
ひとつの外部ファイルに複数の...
-
初心者です。あまりに初歩的な...
-
外部読み込みで動かないときの...
-
外部ファイルを実行
-
ポップアップカレンダーサンプル
-
HTML に書きたくない
おすすめ情報
拙い質問文で申し訳ありません。
jsは外部ファイルにしたいという前提(税率が変わる可能性があるため)がありまして、個々のhtmlで、表示したい単価が変わります。
単価表示(数字)の違う複数のhtmlに、税率の計算をするjsを読み込ませたい。と言ったら良いでしょうか。説明が下手で申し訳ないです。
引き続き、良い方法がありましたらお知恵をお貸しいただけますでしょうか。