1

Пыталась прописать переменные с value, но вышла лажа т.к ещё только вникаю в синтаксис .

Код кидаю песочницей еще так думаю будет лучше . https://codepen.io/EvaSpense/pen/xxZMRgr?editors=1111

function raschitat() {

  radioV = document.getElementsByName('variant_cvet');

  for (i = 0; i < radioV.length; i++) {
    if (radioV[i].checked)

      alert(radioV[i].value);
  }

}

material = document.getElementById('material').value;
switch (material) {
  case "tree":
    cenaMaterial = 15000;
    break
  case "bereza":
    cenaMaterial = 16000;
    break
  case "dub":
    cenaMaterial = 17000;
    break

  case "buk":
    cenaMaterial = 18000;
    break

  case "yasen":
    cenaMaterial = 19000;
    break

  default:
    cenaMaterial = 15000;
    break
}





box = document.getElementById('box').value;
switch (box) {
  case "1":
    cenaBox = 400;
    break

  case "2":
    cenaBox = 500;
    break

  case "3":
    cenaBox = 600;
    break

  case "4":
    cenaBox = 700;
    break

  case "5":
    cenaBox = 800;
    break

  case "6":
    cenaBox = 900;
    break

  default:
    cenaBox = 400;
    break
}


place = document.getElementById('place').value;
switch (place) {
  case "1":
    cenaPlace = 1000;
    break

  case "2":
    cenaPlace = 2000;
    break

  default:
    cenaPlace = 1000;
    break

}

if (box == "") {
  alert("Вы не указали кол-во ящиков");
} else if (place == "") {
  alert("Вы не указали кол-во мест");
} else {

  size = document.getElementById('size').value;
  switch (size) {
    case "1":
      cenaSize = 300;
      break
    case "2":
      cenaSize = 600;
      break
    case "3":
      cenaSize = 700;
      break

    case "4":
      cenaSize = 900;
      break

    case "5":
      cenaSize = 1000;
      break

    default:
      cenaSize = 300;
      break
  }


  bortik = document.getElementById('bortik').value;
  switch (bortik) {
    case "no-bortik":
      cenaBortik = 0;
      break
    case "little bortik":
      cenaBortik = 250;
      break
    case "big bortik":
      cenaBortik = 260;
      break

    default:
      cenaBortik = 0;
      break
  }


  stoimost = (cenaMaterial) + (cenaBox) + (cenaPlace) + (cenaSize) + (cenaBortik) + (radioV);
  document.getElementById('stoimost').innerHTML = "Стоимость равна: " + stoimost + " р.";
}
.cp_item {
  overflow: hidden;
  float: left;
  margin: 0 4px 0 0;
}

img.icon {
  width: 45px;
  height: 45px;
  margin-top: 7px;
}
<head>
  <title>Стандарт Юниор</title>
</head>

<body>

  <h3>Расчет стоимости кровати</h3>

  <p>Стандарт Юниор</p>

  <img src="C:\Users\Desktop\кровати калькулятор\КрСт Юн с быстросъем борт с ящ на кол прямох.jpg" width="400">

  <p>Материал</p>
  <div class="product-field-display">
    <select id="material">
      <option value="sosna">Сосна </option>
      <option value="bereza">Береза </option>
      <option value="dub">Дуб </option>
      <option value="buk">Бук </option>
      <option value="yasen">Ясень </option>
    </select>
  </div>

  <br>


  <p>Цвет</p>


  <div class="cp_item">

    <input type="radio" id="cvet" value="1" name="variant_cvet" checked>
    <img class="icon" src="C:\Users\Desktop\кровати калькулятор\stariy-oreh-3_500x500.jpg" alt="Старый орех 3">
    <span>Темный</span>

  </div>

  <div class="cp_item">

    <input type="radio" id="cvet" value="2" name="variant_cvet">
    <img class="icon" src="C:\Users\Desktop\кровати калькулятор\gr_oreh1_500x500 (1).jpg" alt="Грецкий орех 1">
    <span>Светлый</span>

  </div>

  <div class="cp_item">

    <input type="radio" id="cvet" value="3" name="variant_cvet">
    <img class="icon" src="C:\Users\Desktop\кровати калькулятор\mogano-3_500x500.jpg" alt="Могано">
    <span>Лак</span>

  </div>

  <div class="cp_item">

    <input id="cvet" type="radio" value="4" name="variant_cvet">
    <img class="icon" src="C:\Users\Desktop\кровати калькулятор\venge-1_500x500.jpg" alt="Венге">
    <span>Серый</span>

  </div>


  <div class="cp_item">

    <input id="cvet" type="radio" value="5" name="variant_cvet">
    <img class="icon" src="C:\Users\Desktop\кровати калькулятор\mogano-1_500x500.jpg" alt="Дерево 1">
    <span>Дерево 1</span>

  </div>

  <div class="cp_item">
    <input id="cvet" type="radio" value="6" name="variant_cvet">
    <img class="icon" src="C:\Users\Desktop\кровати калькулятор\mogano-3_500x500.jpg" alt="Дерево 2">
    <span>Дерево 2 </span>

  </div>


  <br>
  <br>
  <br>
  <p>Кол-во ящиков</p>
  <div class="product-field-box">
    <select id="box">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
  </div>



  <br>
  <p>Кол-во спальных мест</p>
  <div class="product-field-place">
    <select id="place">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>

  <br>

  <p>Размер кровати</p>
  <div class="product-field-size">
    <select id="size">
      <option value="1">60x120 +300,00 руб</option>
      <option value="2">70x160 +600,00 руб</option>
      <option value="3">80x160 +700,00 руб</option>
      <option value="4">80x190 +900,00 руб</option>
      <option value="5">90x190 +1000,00 руб</option>
    </select>
  </div>

  <br>

  <p>Тип бортика</p>
  <div class="product-field-bortik">
    <select id="bortik">
      <option value="no-bortik">нет</option>
      <option value="little bortik">быстросъемный +250,00 руб</option>
      <option value="big bortik">стационарный +260,00 руб</option>
    </select>
  </div>

  <br>

  <div><button onclick="raschitat();">Рассчитать стоимость</button></div>
  <br>
  <div id="stoimost"></div>

</body>

1 ответ 1

1
//radioV = document.getElementsByName('variant_cvet');

//for (i = 0; i < radioV.length; i++) {
//  if (radioV[i].checked)
//    alert(radioV[i].value);
//  }
//}

let radioV = +document.querySelector('[name="variant_cvet"]:checked').value;

function raschitat() {

  //radioV = document.getElementsByName('variant_cvet');
  //for (i = 0; i < radioV.length; i++) {
  //  if (radioV[i].checked)
  //    alert(radioV[i].value);
  //}
  //}
  let radioV = +document.querySelector('[name="variant_cvet"]:checked').value;

  material = document.getElementById('material').value;
  switch (material) {
    case "sosna":
      cenaMaterial = 15000;
      break
    case "bereza":
      cenaMaterial = 16000;
      break
    case "dub":
      cenaMaterial = 17000;
      break
    case "buk":
      cenaMaterial = 18000;
      break
    case "yasen":
      cenaMaterial = 19000;
      break
    default:
      cenaMaterial = 15000;
      break
  }

  box = document.getElementById('box').value;
  switch (box) {
    case "1":
      cenaBox = 400;
      break
    case "2":
      cenaBox = 500;
      break
    case "3":
      cenaBox = 600;
      break
    case "4":
      cenaBox = 700;
      break
    case "5":
      cenaBox = 800;
      break
    case "6":
      cenaBox = 900;
      break
    default:
      cenaBox = 400;
      break
  }

  place = document.getElementById('place').value;
  switch (place) {
    case "1":
      cenaPlace = 1000;
      break
    case "2":
      cenaPlace = 2000;
      break
    default:
      cenaPlace = 1000;
      break
  }

  if (box == "") {
    alert("Вы не указали кол-во ящиков");
  } else if (place == "") {
    alert("Вы не указали кол-во мест");
  } else {
    size = document.getElementById('size').value;
    switch (size) {
      case "1":
        cenaSize = 300;
        break
      case "2":
        cenaSize = 600;
        break
      case "3":
        cenaSize = 700;
        break
      case "4":
        cenaSize = 900;
        break
      case "5":
        cenaSize = 1000;
        break
      default:
        cenaSize = 300;
        break
    }

    bortik = document.getElementById('bortik').value;
    switch (bortik) {
      case "no-bortik":
        cenaBortik = 0;
        break
      case "little bortik":
        cenaBortik = 250;
        break
      case "big bortik":
        cenaBortik = 260;
        break
      default:
        cenaBortik = 0;
        break
    }

    stoimost = (cenaMaterial) + (cenaBox) + (cenaPlace) + (cenaSize) + (cenaBortik) + (radioV);
    document.getElementById('stoimost').innerHTML = "Стоимость равна: " + stoimost + " р.";
  }
}
.cp_item {
  overflow: hidden;
  float: left;
  margin: 0 4px 0 0;
}

img.icon {
  width: 45px;
  height: 45px;
  margin-top: 7px;
}
<head>
  <title>Стандарт Юниор</title>
</head>

<body>

  <h3>Расчет стоимости кровати</h3>

  <p>Стандарт Юниор</p>

  <img src="C:\Users\Саша\Desktop\кровати калькулятор\КрСт Юн с быстросъем борт с ящ на кол прямох.jpg" width="400">

  <p>Материал</p>
  <div class="product-field-display">
    <select id="material">
      <option value="sosna">Сосна </option>
      <option value="bereza">Береза </option>
      <option value="dub">Дуб </option>
      <option value="buk">Бук </option>
      <option value="yasen">Ясень </option>
    </select>
  </div>

  <br>


  <p>Цвет</p>


  <div class="cp_item">

    <input type="radio" id="cvet" value="1" name="variant_cvet" checked>
    <img class="icon" src="C:\Users\Саша\Desktop\кровати калькулятор\stariy-oreh-3_500x500.jpg" alt="Старый орех 3">
    <span>Темный</span>

  </div>

  <div class="cp_item">

    <input type="radio" id="cvet" value="2" name="variant_cvet">
    <img class="icon" src="C:\Users\Саша\Desktop\кровати калькулятор\gr_oreh1_500x500 (1).jpg" alt="Грецкий орех 1">
    <span>Светлый</span>

  </div>

  <div class="cp_item">

    <input type="radio" id="cvet" value="3" name="variant_cvet">
    <img class="icon" src="C:\Users\Саша\Desktop\кровати калькулятор\mogano-3_500x500.jpg" alt="Могано">
    <span>Лак</span>

  </div>

  <div class="cp_item">

    <input id="cvet" type="radio" value="4" name="variant_cvet">
    <img class="icon" src="C:\Users\Саша\Desktop\кровати калькулятор\venge-1_500x500.jpg" alt="Венге">
    <span>Серый</span>

  </div>


  <div class="cp_item">

    <input id="cvet" type="radio" value="5" name="variant_cvet">
    <img class="icon" src="C:\Users\Саша\Desktop\кровати калькулятор\mogano-1_500x500.jpg" alt="Дерево 1">
    <span>Дерево 1</span>

  </div>

  <div class="cp_item">
    <input id="cvet" type="radio" value="6" name="variant_cvet">
    <img class="icon" src="C:\Users\Саша\Desktop\кровати калькулятор\mogano-3_500x500.jpg" alt="Дерево 2">
    <span>Дерево 2 </span>

  </div>


  <br>
  <br>
  <br>
  <p>Кол-во ящиков</p>
  <div class="product-field-box">
    <select id="box">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
  </div>



  <br>
  <p>Кол-во спальных мест</p>
  <div class="product-field-place">
    <select id="place">
      <option value="1">1</option>
      <option value="2">2</option>
    </select>
  </div>

  <br>

  <p>Размер кровати</p>
  <div class="product-field-size">
    <select id="size">
      <option value="1">60x120 +300,00 руб</option>
      <option value="2">70x160 +600,00 руб</option>
      <option value="3">80x160 +700,00 руб</option>
      <option value="4">80x190 +900,00 руб</option>
      <option value="5">90x190 +1000,00 руб</option>
    </select>
  </div>

  <br>

  <p>Тип бортика</p>
  <div class="product-field-bortik">
    <select id="bortik">
      <option value="no-bortik">нет</option>
      <option value="little bortik">быстросъемный +250,00 руб</option>
      <option value="big bortik">стационарный +260,00 руб</option>
    </select>
  </div>

  <br>

  <div><button onclick="raschitat();">Рассчитать стоимость</button></div>
  <br>
  <div id="stoimost"></div>

</body>

4
  • не работает :( можно больше подробностей ,пожалуйста
    – alex783
    23 июл 2020 в 17:49
  • @АлександраВоробьёва Вы напутали со скобками.
    – user176262
    23 июл 2020 в 17:54
  • Спасибо огромное за помощь!!:)))))))))
    – alex783
    23 июл 2020 в 18:06
  • @АлександраВоробьёва Пожалуйста. Успехов. Знак "галочка" - слева от ответа.
    – user176262
    23 июл 2020 в 18:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.