Как сделать калькулятор расчета стоимости товара

Question

Я сверстал макет страницы покупки товара, теперь мне нужно написать логику. Нужно сделать примерно так же как и тут https://www.apple.com/ru/shop/buy-iphone/iphone-11-pro/

Нужно сделать так, чтобы при выборе одного из блоков у него появлялась рамка синего цвета (добавлением класса), и при этом она пропадала у всех остальных блоков в группе. При выборе определенного блока должна меняться итоговая цена. Изначально все картинки выведены на страницу со свойством display: none, при выборе определенного блока соответствующая картинка отображается, а все остальные скрываются

Как сделать так, чтобы js понимал что если я выбрал iphone 11 pro max, и выбрал золотой цвет, то нужно отображать именно эту модель золотого цвета, а не какую-то другую?

function calc() {
  var selectModelPro = document.getElementById("selectModelPro").getAttribute("value"); //получаем стоимость из атрибута value
  var price = 0;
  price += parseInt(selectModelPro);

  document.getElementById("result").textContent = price; // выводит цену под надписью "Купить iPhone"
  document.getElementById("resultUnderOptions").textContent = price; // выводит цену в блоке с кнопкой "Добавить в корзину"
}

<div id="buyOptions">
  <!-- правый блок с опциями покупки айфона -->

  <div id="wrapperBuyIphone">

    <div id="buyIphoneHead">
      <span id="buyIphoneLabel">Купить iPhone 11 Pro</span>
      <div><span id="result">0</span> руб.</div><br>

      <span class="labelsForBlockBuyOptions">Выберите модель</span>
      <!-- блок с моделями -->

      <div id="selectModelPro" onclick="calc()" value="89990">
        <span id="Iphone11ProName">iPhone 11 Pro</span><br>
        <span id="labelFrom">От 89 990 руб.</span><br>
        <span id="displayIphone">Дисплей 5,8 дюйма</span>
      </div>

      <div id="selectModelProMax" onclick="calc()" value="99990">
        <span id="Iphone11ProName">iPhone 11 Pro Max</span><br>
        <span id="labelFrom">От 99 990 руб.</span><br>
        <span id="displayIphone">Дисплей 6,5 дюйма</span>
      </div>


      <hr style="margin: 6% 0 6% 0; color: #515154; width: 75%">


      <span class="labelsForBlockBuyOptions">Выберите цвет</span>
      <!-- блок с цветами -->

      <div id="selectColor">
        <div id="colorBlock">
          <div id="circleColorSpaceGrey"></div>
          <span id="labelForCircle">«Серый космос»</span>
        </div>

        <div id="colorBlock">
          <div id="circleColorSilver"></div>
          <span id="labelForCircle">Серебристый</span>
        </div>

        <div id="colorBlock">
          <div id="circleColorGreen"></div>
          <span id="labelForCircle">Тёмно-зелёный</span>
        </div>

        <div id="colorBlock">
          <div id="circleColorGold"></div>
          <span id="labelForCircle">Золотой</span>
        </div>
      </div>


      <hr style="margin: 6% 0 6% 0; color: #515154; width: 75%">


      <span class="labelsForBlockBuyOptions">Выберите ёмкость.</span>
      <!-- блок с емкостью памяти -->

      <div id="selectColor">
        <div id="colorBlock" value="89990">
          <div id="memory64"><span id="memory">64</span> <span id="gb">ГБ</span></div>
          <span id="labelForMemory">89 990.00 руб</span>
        </div>

        <div id="colorBlock">
          <div id="memory256"><span id="memory">256</span> <span id="gb">ГБ</span></div>
          <span id="labelForMemory">103 990.00 руб</span>
        </div>

        <div id="colorBlock">
          <div id="memory512"><span id="memory">512</span> <span id="gb">ГБ</span></div>
          <span id="labelForMemory">121 990.00 руб</span>
        </div>

      </div>


      <div id="wrapForBlockPrice">
        <div id="BlockWithPrice">
          <!-- блок с кнопкой "добавить в корзину" и итоговой ценой -->
          <span id="resultUnderOptions">0</span>
          <hr style="margin: 3% 0 3% 0; color: #515154; width: 100%">
          <button id="buttonAddToBasket"><span id="labelAddToBasket">Добавить в корзину</span></button>
        </div>
      </div>


    </div>

  </div>

</div>

Answer 1

Вот вам код и даже без js.

upd: Ладно, немного js не помешает. Для красоты.

document.querySelector('[tabindex="1"]').focus();

.item {
  border: 2px solid #ddd;
  width: 300px;
  height: 48px;
  border-radius: 4px;
  display: block;
}

.item:not(:last-child) {
  margin-bottom: 8px;
}

.item:focus {
  border-color: rgba(0, 128, 255, 1);
  box-shadow: 0 0 0 3px rgba(0, 128, 255, .3);
}

.pic {
  position: fixed;
  right: 0;
  top: 0;
  display: none;
}

.item:focus+.pic {
  display: block;
}

<div class="item" tabindex="1"></div>
<img class="pic" src="https://shop.gadgetufa.ru/images/upload/48828-smartfon-apple-iphone-11-64gb-product-red_thumb256.jpg">
<div class="item" tabindex="2"></div>
<img class="pic" src="https://shop.gadgetufa.ru/images/upload/48827-smartfon-apple-iphone-11-64gb-purple_thumb256.jpg">

Answer 2

таким подходом можно сделать... и повторюсь, избегай ID

const items = document.querySelector('.block'); // родительский элемент списка

items.onclick = (e) => {
  const currentElem = e.target; // елемент списка на который мы кликнули

  if (currentElem.classList.contains('block__item')) {
    const activeElem = document.querySelector('.block__item_active'); // ищем активный элемент
    if (activeElem) {
      activeElem.classList.remove('block__item_active'); // удаляем активный класс
    }
    currentElem.classList.add('block__item_active'); // добавляем активный класс
  }
}

body {
  background: white;
  margin: 0;
}

.block__item {
  border: 1px solid black;
  width: 200px;
  padding: 10px;
  margin-bottom: 50px;
  cursor: pointer;
}

.block__item_active {
  border: 1px solid red;
}

<div class="block">
  <div class="block__item">
    200 р
  </div>
  <div class="block__item">
    100 р
  </div>
</div>

БЛОГ НА HUSL

Как сделать калькулятор расчета стоимости товара

Ответы (2 шт):