JSFiddle - React, Tailwind, and code Playground

by 3alisaki

HTML

<p>رنگ:</p>
<div>
  <label>آبی<input type="radio" name="color-selector" value="1" checked /></label>
  <label>زرد<input type="radio" name="color-selector" value="2" /></label>
  <label>بنفش<input type="radio" name="color-selector" value="3" /></label>
  <label>سبز<input type="radio" name="color-selector" value="4" /></label>
</div>
<p>گارانتی:</p>
<select name="warranty-selector" value="1">
  <option value="1">بدون</option>
  <option value="2">گارانتی آونگ</option>
  <option value="3">گارانتی ویستا (الماس)</option>
  <option value="4">گارانتی مادیران</option>
</select>
<p>قیمت:</p>
<div id="product-price">100 هزار تومان</div>
<p><button id="buy-button">خرید</button></p>

CSS

html {
  direction: rtl;
}

JavaScript

var color_selector = document.getElementsByName('color-selector');
var warranty_selector = document.getElementsByName('warranty-selector')[0];
var product_price = document.getElementById('product-price');
var buy_button = document.getElementById('buy-button');

var availible_products = [
  { color: '1', warranty: '1', price: '100 هزار تومان' },
  { color: '1', warranty: '2', price: '110 هزار تومان' },
  { color: '1', warranty: '3', price: '120 هزار تومان' },
  { color: '2', warranty: '1', price: '115 هزار تومان' },
  { color: '2', warranty: '2', price: '105 هزار تومان' },
  { color: '3', warranty: '1', price: '125 هزار تومان' },
  { color: '4', warranty: '1', price: '125 هزار تومان' },
];

function change_product_date() {
  var selected_color = false;
  color_selector.forEach(function(color_input) {
    if (color_input.checked) {
      selected_color = color_input.value;
    }
  });
  var selected_warranty = warranty_selector.value;
  var is_availible = false;
  availible_products.forEach(function (product_details) {
    if (!is_availible) {
      if (product_details.color === selected_color &&
        product_details.warranty === selected_warranty) {
        is_availible = true;
        product_price.innerText = product_details.price;
        buy_button.disabled = false;
      }
    }
  });
  if (!is_availible) {
    product_price.innerText = "این ترکیب موجود نیست";
    buy_button.disabled = true;
  }
}

color_selector.forEach(function(color_input) {
  color_input.addEventListener('change', change_product_date);
});
warranty_selector.addEventListener('change', change_product_date);