Как сделать JavaScript универсалным?

Question

[Dooti]

У меня есть "магазин", в котором есть определённое колличество товаров, при нажатии на товар генерируется форма для покупки товара

case 'generate_buy_form':
			$id = intval($post['id']);
			$product = $db->super_query("SELECT * FROM `cabinet_products` WHERE `id` = '{$id}'");

			$form = get_tpl( $cabinet_config['template'], '/shop/buy_form.tpl');
			$form = str_replace("{product-image}", $product['block_image'], $form);
			$form = str_replace("{product-name}", $product['block_name'], $form);
			$form = str_replace("{product-price}", $product['block_price'], $form);
			$form = str_replace("{product-id}", $product['id'], $form);

			$row = [ 'response' => $form, ];
			ajax_html('success', 'Предметы с сервера успешно получены', $row);
			break;

И buy_form.tpl

<script>
  var price = "{product-price}";
  var amount = document.getElementById('product_amount');
  let totalamount = document.getElementById('totalamount');
  let totalcost = document.getElementById('totalcost');
  function fullprice() {
    totalamount.textContent = 'Стоимось за ' + amount.value + ' шт:';
    totalcost.textContent = price * amount.value + ' рублей';
  }
  amount.oninput = function () {
    fullprice();
  }
</script>


<form action id="buy_product_form">
  <div class="modal-product">
    <div class="modal-product__image">
      <img src="{product-image}" alt="">
    </div>
    <div class="modal-product__content">
      <div class="modal-product__info">
        <span>Блок:</span>
        <span>{product-name}</span>
      </div>
      <div class="modal-product__info">
        <span>Стоимость за шт:</span>
        <span>{product-price} рублей</span>
      </div>
      <div class="modal-product__info">
        <span id="totalamount">Стоимость за шт:</span>
        <span id="totalcost">{product-price} рублей</span>
      </div>
      <div class="modal-product__info">
        <span class="mb-1">Количество:</span>
        <div class="form-group mb-1">
          <input type="number" class="form-control" name="product_amount" id="product_amount" placeholder="Количество" required>
        </div>
      </div>
    </div>
  </div>
  <button type="button" class="cabinet-button" onclick="buy_product('{product-id}')">Купить</button>
</form>

Мне нужно чтоб при вводе колличества товара в {product-price} рублей писалась цена за колличество товаров, а с данным скриптом при закрытии одной формы товара и открытии другой вылазит вот такакя ошибка в консоль

Ошибка

Uncaught SyntaxError: Identifier 'totalamount' has already been declared
at DOMEval (jquery-3.4.1.js:124:12)
at domManip (jquery-3.4.1.js:5945:8)
at jQuery.fn.init.append (jquery-3.4.1.js:6081:10)
at jQuery.fn.init. (jquery-3.4.1.js:6175:18)
at access (jquery-3.4.1.js:3962:8)
at jQuery.fn.init.html (jquery-3.4.1.js:6142:10)
at Object.success (main.js:282:43)
at fire (jquery-3.4.1.js:3291:31)
at Object.fireWith [as resolveWith] (jquery-3.4.1.js:3421:7)
at done (jquery-3.4.1.js:9533:14)

И скрипт перестаёт работать, как сделать чтоб скрипт был "универсальным"?

Comments

[Сергей delphinpro]

Еще один...

Как сделать JavaScript универсалным?

Язык Javascript уже универсален, его можно использовать практически везде. И вам ничего для этого делать не нужно.

Answer 1

[Slava Rozhnev]

var totalamount = document.getElementById('totalamount');
  var totalcost = document.getElementById('totalcost');

Comments

[Dooti]

Спасибо огромное!