3年分の推移データに対してJavaScriptで比率を計算して出力したい

Question

概要

3年分の売り上げ、営業利益が順番に出力されたTableがあります。

-	1年目	比率	2年目	比率	3年目	比率
売上	50,000	100%	55,000	100%	60,000	100%
営業利益	4,246	★	3,900	★	5,190	★

上の、★の部分に、（営業利益÷売上*100）の結果を出したいと思っています。

下記のように、JavaScritpで計算をしてみましたが、うまくいきませんでした。

試したこと

                <table class="table table-bordered">
                    <tr>
                        <td></td>
                        <td colspan="2">1年目</td>
                        <td colspan="2">2年目</td>
                        <td colspan="2">3年目</td>
                    </tr>
                    <tr>
                        <td>売上高</td>
                        <td id="sales">50,000</td>
                        <td>100%</td>
                        <td id="sales">55,000</td>
                        <td>100%</td>
                        <td id="sales">60,000</td>
                        <td>100%</td>
                    </tr>
                    <tr>
                        <td>営業利益</td>
                        <td id="profit">4,246</td>
                        <td id="rate_profit"></td>
                        <td id="profit">3,900</td>
                        <td id="rate_profit"></td>
                        <td id="profit">5,190</td>
                        <td id="rate_profit"></td>
                    </tr>
                </table>

window.addEventListener('DOMContentLoaded', function(e){
	let sales = parseInt(document.getElementById('sales').textContent);
	let profit = parseInt(document.getElementById('profit').textContent);

	let rate_profit = (profit / sales * 100).toFixed(1);

	document.getElementById('rate_profit').textContent=rate_profit;
  });

しかしこの方法では1年目しか計算されません。
また、JavaScriptで数字を拾うときに、カンマで区切ってあると最初のカンマの左側の数字しか読み取ってもらえません。
（例　「50,000」＝＞「50」になってしまう。）

また、JavaScriptでgetElementByNameを使い、HTMLでもname="xx"とした場合も試しましたが、こちらですと1年目も計算結果が表示されませんでした。

ご教授いただけますと幸いです。

Answer 1

「50,000」のような文字列を

let str = document.getElementById('sales').textContent
let sales =Number( str.replace(/,/, '') );

のように,を削除するやり方と、
HTMLタグにdata属性をdata-salse='50000'のようにカンマ区切りなしでSalesのデータを持たせて、それをJavascriptで取得するやり方がいいかなと思いました！

Comments

[ak_suzuki]

ありがとうございます。
参考にさせていただきます。

Answer 2

クラスで処理すればよいです

<script>
window.addEventListener('DOMContentLoaded', function(e){
  var sales=document.querySelectorAll('.sales');
  var profit=document.querySelectorAll('.profit');
  [].forEach.call(document.querySelectorAll('.rate_profit'),function(x,y){
    var v1=parseInt(sales[y].textContent.replace(",",""));
    var v2=parseInt(profit[y].textContent.replace(",",""));
    x.textContent=(v2/v1*100).toFixed(1);
  });
});
</script>
<table border>
    <tr>
        <td></td>
        <td colspan="2">1年目</td>
        <td colspan="2">2年目</td>
        <td colspan="2">3年目</td>
    </tr>
    <tr>
        <td>売上高</td>
        <td class="sales">50,000</td>
        <td>100%</td>
        <td class="sales">55,000</td>
        <td>100%</td>
        <td class="sales">60,000</td>
        <td>100%</td>
    </tr>
    <tr>
        <td>営業利益</td>
        <td class="profit">4,246</td>
        <td class="rate_profit"></td>
        <td class="profit">3,900</td>
        <td class="rate_profit"></td>
        <td class="profit">5,190</td>
        <td class="rate_profit"></td>
    </tr>
</table>

Answer 3

idが重複しまくってるので、計算の部分をなんとかしても上手く動かないと思います。
ご参考

あと、hatsuさんの回答にあるようにデータの部分は全部JavaScript側に持って（表示用の形式ではなくちゃんと数値として）、計算した結果を表示用の文字列に整形してセットしてあげるのが良いとは思いますが、まぁ学習用の課題とかそういうレベルの話だと思いますので、とりあえず今の方法で,だけ取ってやれば良いんじゃないかと、

Comments

[ak_suzuki]

ありがとうございます。リンク先の内容、しっかりと学習します。