【グラム単価計算機】誰でも簡単にできる【計算式やコード(Javascript)も掲載】

グラム単価計算機

価格と内容量を入力すると、自動的に価格が計算されます。

価格 (円): 内容量 (g):

1g : 0 円

10g : 0 円

100g : 0 円

１グラムあたりの値段の計算方法

式：金額÷グラム数＝１gあたりの価格

1グラムあたりの金額を計算したい場合は、金額をグラム数で割ることで計算することが出来ます。

10グラムあたりの値段の計算方法

式：金額÷グラム数×10＝10gあたりの価格

10グラムあたりの金額を計算したい場合は、金額をグラム数で割ったあとに10をかけることで計算することが出来ます。

100グラムあたりの値段の計算方法

式：金額÷グラム数×100＝100gあたりの価格

100グラムあたりの金額を計算したい場合は、金額をグラム数で割ったとに100をかけることで計算することが出来ます。

グラム単価計算機のコード

以下に上記のグラム単価計算機で実装している Javascriptのコードを公開するので、ご自由にお使いください。

【グラム単価計算機】



<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        input, .result {
            display: block;
            margin: 10px 0;
        }
</style>

<h3>グラム単価計算機</h3>
<p><span style="font-size: 80%;">価格と内容量を入力すると、自動的に価格が計算されます。</span></p>
<hr>
    <label for="price">価格 (円):</label>
    <input type="number" id="price" placeholder="価格を入力">
    <label for="amount">内容量 (g):</label>
    <input type="number" id="amount" placeholder="内容量を入力">
    <div class="result">
        <strong>1g :</strong> <span id="pricePerGram">0</span> 円
    </div>
    <div class="result">
        <strong>10g :</strong> <span id="pricePer10Gram">0</span> 円
    </div>
    <div class="result">
        <strong>100g :</strong> <span id="pricePer100Gram">0</span> 円
    </div>
<hr>
<script>
        const priceInput = document.getElementById('price');
        const amountInput = document.getElementById('amount');
        const pricePerGram = document.getElementById('pricePerGram');
        const pricePer10Gram = document.getElementById('pricePer10Gram');
        const pricePer100Gram = document.getElementById('pricePer100Gram');

        function calculatePrices() {
            const price = parseFloat(priceInput.value);
            const amount = parseFloat(amountInput.value);

            if (price > 0 && amount > 0) {
                const perGram = price / amount;
                pricePerGram.textContent = perGram.toFixed(2);
                pricePer10Gram.textContent = (perGram * 10).toFixed(2);
                pricePer100Gram.textContent = (perGram * 100).toFixed(2);
            } else {
                pricePerGram.textContent = 0;
                pricePer10Gram.textContent = 0;
                pricePer100Gram.textContent = 0;
            }
        }
        priceInput.addEventListener('input', calculatePrices);
        amountInput.addEventListener('input', calculatePrices);
</script>