JSFiddle - React, Tailwind, and code Playground

by huuzoo

HTML

<div class="product">
<label><input type="radio" name="item" id="a" onclick ="priceCalc(this);">商品A：1000円（税抜）</label>
<label><input type="radio" name="item" id="b" onclick ="priceCalc(this);" >商品B：500円（税抜）</label>
<label><input type="radio" name="item" id="c" onclick ="priceCalc(this);" >商品C：100円（税抜）</label>
</div>
<div class="gray">
税込：<span id="result"></span>
</div>

CSS

.product label {
 display: block;
}

.gray {
  background-color: #eee;
  padding: 10px;
  margin-top: 5px;
}

JavaScript

const tax = 1.08;
var productPrice = {
	'a': 1000,
  'b': 500,
  'c': 100
};

function priceCalc(radio){
	var rd_id = radio.id;
  var non_tax_price =  productPrice[rd_id];
  var price = taxCalc(non_tax_price);
  
  var result = document.getElementById("result")
  result.innerHTML = price + '円';
}

function taxCalc (priceBeforeTax) {
	var price = priceBeforeTax * tax;
  var priceAfterTax = Math.round(price);
	return priceAfterTax;
}