Помогите заставить работать скрипт калькулятора

Question

Помогите пожалуйста разобраться.. Хотел поставить калькулятор расчета объема и стоимости с загрузкой из Google таблиц. Нашел то что нужно, скачал, вставил в страницу, но не чего не работает даже близко..

Скачал тут- https://konmart.ru/articles/volume-calculator#comment-10432

 <title>Калькулятор</title>



  <style>
body {
  background: #e9e9e9;
  font-family: Roboto;
}

#calculator-form-wrap {
  display:flex;
  justify-content: center;

}


#calculator-form {
  background: #ffffff;
  padding:15px 35px;
  border-radius: 5px;
  text-align: center;

}

.calculate-value-input, .calculate-cost-input {
  padding: 7px 12px;
  border: 1px solid #cacaca;
}

.calculate-value-input option, .calculate-cost-input option {
  padding: 7px 12px;
  font-size: 16px;
}

.result-right {
  font-size:38px;
}

.measuring {
  font-size: 15px;
    display: flex;
    justify-content: center;
}







    </style>
</head>

<body>




  <br>

  <p id="message">

  </p>


  <?php
  $id = '1Ev0ja9xNGRcivu3BrhhVuhaoGADfRV8sI4Nk-VBWSok'; // id Google таблицы
  $gid = '0';
  $rangeLength = 'A:A';
  $rangeWidth = 'B:B';
  $rangeHeight = 'C:C';
  $rangeQuantity = 'D:E';

  $csvLength = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeLength);
  $csvWidth = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeWidth);
  $csvHeight = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeHeight);
  $csvQuantity = file_get_contents('https://docs.google.com/spreadsheets/d/' . $id . '/export?format=csv&gid=' . $gid . '&range=' . $rangeQuantity);


  $csvLength = explode("\r\n", $csvLength);
  $csvWidth = explode("\r\n", $csvWidth);
  $csvHeight = explode("\r\n", $csvHeight);
  $csvQuantity = explode("\r\n", $csvQuantity);



  $arrayLength = array_map('str_getcsv', $csvLength);
  $arrayWidth = array_map('str_getcsv', $csvWidth);
  $arrayHeight = array_map('str_getcsv', $csvHeight);
  $arrayQuantity = array_map('str_getcsv', $csvQuantity);


  ?>



<div id="calculator-form-wrap">

  <form action="" id="calculator-form">

  <h1>Калькулятор объема и стоимости</h1>



  <br>


    <select name="length" id="length" class="calculate-value-input">
      <option selected disabled>Длина</option>
      <?php
      $counter = 0;
      foreach ($arrayLength as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>'><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>




    <select name="width" id="width" class="calculate-value-input">
      <option selected disabled>Ширина</option>

      <?php
      $counter = 0;
      foreach ($arrayWidth as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>'><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>




    <select name="height" id="height" class="calculate-value-input">
      <option selected disabled>Высота</option>

      <?php
      $counter = 0;
      foreach ($arrayHeight as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>'><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>



<br>
<br>
     <div id="result-value">
      &nbsp
      <br>
     &nbsp</div>
     



    <br>
    <br>


    <label for="quantity"></label>
    <select name="quantity" id="quantity" class="calculate-cost-input">
      <option selected disabled>Количество</option>

      <?php
      $counter = 0;
      foreach ($arrayQuantity as $key => $value) {
        if ($counter > 0) { ?>
          <option value='<?php echo $value[0] ?>' data-price="<?php echo $value[1] ?>" ><?php echo $value[0] ?></option>
        <?php }
        $counter++;    ?>

      <?php } ?>
    </select>






<br>
<br>
      &nbsp<div id="result-cost">
      &nbsp
      <br>
     &nbsp
      </div>
      



  </form>

  </div>

  <div style="display:flex; justify-content:center;">

<div style="background:#ffffff; padding: 40px; margin:50px 0px; width: 600px; color:#3b3b3b; line-height:170%;">
    <a href="https://docs.google.com/spreadsheets/d/1Ev0ja9xNGRcivu3BrhhVuhaoGADfRV8sI4Nk-VBWSok/edit#gid=0" target="_blank">Ссылка на файл</a> Google таблицы.
</div>

</div>

  <script type="text/javascript" src="calculator.js"></script>


let valueInput = document.querySelectorAll('.calculate-value-input')
let totalCostInput = document.querySelectorAll('.calculate-cost-input')



function calculateValue() {

let length = document.getElementById('length')
let width = document.getElementById('width')
let height = document.getElementById('height')

let volume = length.value * width.value * height.value

// if(length.value && width.value && height.value) {
if(volume > 0) {

document.querySelector('#result-value').innerHTML = `Объем: <br><div class="result-right">${volume} <span class="measuring">см <sup>3</sup></span></div>`;

} else {
 document.querySelector('#result-value').innerHTML = '<div style="color:red">Выбраны не все параметры</div><br><br>';

}



return volume;
}


function calculateCost() {

let quantity = document.getElementById('quantity').value
let price = document.getElementById('quantity').options[document.getElementById('quantity').selectedIndex].getAttribute('data-price')
let totalCost = quantity * price
let totalCostNum = totalCost.toLocaleString()



// if(quantity.value && price.value) {
if(totalCost > 0) {

document.querySelector('#result-cost').innerHTML = `Стоимость: <br><div class="result-right">${totalCostNum} ₽</div><br> Цена за единицу: ${price} ₽<br><br>`;


} else {
 document.querySelector('#result-cost').innerHTML = '<div style="color:red">Выбраны не все параметры</div><br><br><br>';


}

}


$('.calculate-value-input').bind('change', calculateValue)
$('.calculate-cost-input').bind('change', calculateCost)

БЛОГ НА HUSL

Помогите заставить работать скрипт калькулятора

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