前提
ある入門書のガイドから思いついた物で、jsで小数点の桁数によってテキストの表示を変えるfunctionを書いています。
実現したいこと
-桁数によってテキストの表示を変える
例）小数点以下が５個の場合、「5th」と表示させたいです。
どなたかアドバイスお願いいたします。
該当のソースコード
html
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>テンプレート</title><link href="../../_common/images/favicon.ico" rel="shortcut icon"><link href="https://fonts.googleapis.com/css?family=M+PLUS+1p:400,500" rel="stylesheet"><link href="../../_common/css/style.css" rel="stylesheet"></head><body><header><div class="container"><h1>タイトル</h1><h2>サブタイトル</h2></div><!-- /.container --></header><main><div class="container"><section> <p>Pi is <span id="pi"></span>!</p><p>When you round off usually, it's <span id="floor">!</span></p> <p>When you round off at the <span id="change"></span> decimal point, it's <span id="output">!</span></p> </section></div><!-- /.container --></main><footer><div class="container"><p>JavaScript Samples</p></div><!-- /.container --></footer> //実際にはここにjsを書いてます。 </body></html>
JavaScript
<script> // document.getElementById('pi').textContent = Math.PI; // document.getElementById('floor').textContent = Math.floor(Math.PI); function point (num, digit) { const mover = 10 ** digit; return Math.floor(num * mover) / mover;} document.getElementById('output').textContent = point(Math.PI, 5); // 1 だったらst、2だったらnd, 3だったらrd, else はthを表示function addOrder (digit) {if (digit === 1) { return '1 st';} else if (digit === 2) { return '2 nd';} else if (digit === 3) { return '3 rd';} else { return digit + 'th';}}; document.getElementById('change').textContent = addOrder(digit); </script>
0 コメント