桁数によってhtmlの表示を変えたい

前提

ある入門書のガイドから思いついた物で、jsで小数点の桁数によってテキストの表示を変えるfunctionを書いています。

実現したいこと

-桁数によってテキストの表示を変える
例）小数点以下が５個の場合、「5th」と表示させたいです。

どなたかアドバイスお願いいたします。

該当のソースコード

html
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<meta name="viewport" content="width=device-width,initial-scale=1">
6<title>テンプレート</title>
7<link href="../../_common/images/favicon.ico" rel="shortcut icon">
8<link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet">
9<link href="../../_common/css/style.css" rel="stylesheet">
10</head>
11<body>
12<header>
13<div class="container">
14<h1>タイトル</h1>
15<h2>サブタイトル</h2>
16</div><!-- /.container -->
17</header>
18<main>
19<div class="container">
20<section>
21
22<p>Pi is <span id="pi"></span>!</p>
23<p>When you round off usually, it's <span id="floor">!</span></p>
24
25<p>When you round off at the <span id="change"></span> decimal point, it's <span id="output">!</span></p>
26
27</section>
28</div><!-- /.container -->
29</main>
30<footer>
31<div class="container">
32<p>JavaScript Samples</p>
33</div><!-- /.container -->
34</footer>
35
36//実際にはここにjsを書いてます。
37</body>
38</html>
39
40

JavaScript
1<script>
2
3// document.getElementById('pi').textContent = Math.PI;
4
5// document.getElementById('floor').textContent = Math.floor(Math.PI);
6
7function point (num, digit) {
8    const mover = 10 ** digit;
9    return Math.floor(num * mover) / mover;
10}
11
12document.getElementById('output').textContent = point(Math.PI, 5);
13
14// 1 だったらst、2だったらnd,　3だったらrd, else はthを表示
15function addOrder (digit) {
16if (digit === 1) {
17    return '1 st';
18} else if (digit === 2) {
19    return '2 nd';
20} else if (digit === 3) {
21    return '3 rd';
22} else {
23    return digit + 'th';
24}
25};
26
27document.getElementById('change').textContent = addOrder(digit);
28
29</script>
30

行動規範の内容に同意します

回答1件

ベストアンサー

関数pointの第二引数に渡す数と、addOrderの引数に渡す数は同じなので、これをひとつの変数に入れておいて、関関数を呼び出すときにこれを使えばよいかと思います。
一例としてはこうです。

javascript
1const DIGIT = 5;
2document.getElementById('output').textContent = point(Math.PI, DIGIT);
3document.getElementById('change').textContent = addOrder(DIGIT);
4
5function addOrder(digit) {
6  if (digit === 1) {
7    return '1 st';
8  } else if (digit === 2) {
9    return '2 nd';
10  } else if (digit === 3) {
11    return '3 rd';
12  } else {
13    return digit + 'th';
14  }
15};
16
17function point(num, digit) {
18    const mover = 10 ** digit;
19    return Math.floor(num * mover) / mover;
20}

上記で追加した変数名は DIGIT にしていますが、小文字の digit にしても、addOrder や point の仮引数の digit とは別物なので意図通り実行されますが、同じ変数名だと混乱しそうなので大文字の DIGIT にしています。

補足

(1) point(num, digit) は toFixed を使って以下のようにも書けます。

javascript
1function point(num, digit) {
2  return num.toFixed(digit);
3}

(2) 細かい話ですが、digit に 21, 22, 23 を渡したとき、addOrder は 21th, 22th, 23th を返しますが、21st, 22nd, 23rd を返させたほうが「英語へのこだわり感」があって良いかもと思いました。

投稿2022/09/25 07:23

退会済みユーザー

総合スコア0

Iori

2022/09/25 12:38

ありがとうございます。ご指示いただいたとおりconstを書いて変数を共通化させて成功しました。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！