У меня почему-то не хочет работать кнопка:
При нажатий на кнопку "Заказать" должен появляться popup, но ничего не происходит даже ошибку не выдает
JS:
;(function() {
var catalog = document.querySelector('.catalog');
if (catalog === null) {
return;
}
var changeProductSize = function(target) {
var product = myLib.closestItemByClass(target, 'product');
var previousBtnActive = product.querySelector('.product_size.is-active');
previousBtnActive.classList.remove('is-active');
target.classList.add('is-active');
};
var changeProductOrderInfo = function(target) {
var product = myLib.closestItemByClass(target, 'product');
var order = document.querySelector('.popup_order');
var productTitle = product.querySelector('.product_title').textContent;
var productSize = product.querySelector('.product_size.is-active').textContent;
var productPrice = product.querySelector('.product_price-value').textContent;
var productImgSrc = product.querySelector('.product_img').getAttribute('src');
order.querySelector('.order-info-title').setAttribute('value', productTitle);
order.querySelector('.order-info-size').setAttribute('value', productSize);
order.querySelector('.order-info-price').setAttribute('value', productPrice);
order.querySelector('.order-product-title').textContent = productTitle;
order.querySelector('.order-product-price').textContent = productPrice;
order.querySelector('.order_size').textContent = productSize;
order.querySelector('.order_img').setAttribute('src', productImgSrc);
};
catalog.addEventListener('click', function(e) {
var target = e.target;
if (target.classList.contains('product_size') && !target.classList.contains('is-active')) {
e.preventDefault();
changeProductSize(target);
}
if (target.classList.contains('product_btn')) {
e.preventDefault();
changeProductOrderInfo(target);
}
});
})();
HTML кнопки
<div class="catalog_item" data-category="legcosplavni">
<div class="product catalog_product">
<img src="img/tovar_img/08.jpg" alt="" class="product_img">
<div class="product_content">
<h3 class="product_title">CMS 209</h3>
<p class="product_description">Тип: Легкосплавні диски<br>Країна виробник: Німеччина</p>
</div>
<footer class="product_footer">
<div class="product_sizes">
<button class="product_size is-active" type="button">R15</button>
<button class="product_size" type="button">R16</button>
<button class="product_size" type="button">R17</button>
<button class="product_size" type="button">R18</button>
</div>
<div class="product_bottom">
<div class="product_price">
<span class="product_price-value">1234</span>
<span class="product_currency">₴</span>
</div>
<button class="btn product_btn" type="button">Заказать</button>
</div>
</footer>
</div>
</div>
HTML на popup
<div class="popup popup_order ">
<div class="popup_wrapper">
<div class="popup_iner">
<div class="popup_content">
<button class="btn-close popup_btn-close popup-close"></button>
<h2 class="page_title popup_title">Заповнити форму</h2>
<p class="popup_suptitle">Щоб ми зв'язалися з вами для оформлення замовлення </p>
<div class="order">
<img class="order_img" src="img/tovar_img/03.jpg" alt="">
<h3 class="order_title">
<span class="order-product-title">ZW 3206</span>
<span class="order-product-price">1344</span> ₴
</h3>
<p class="order_size">R15</p>
<form class="form">
<input class="order-info-title" type="hidden" name="диск">
<input class="order-info-price" type="hidden" name="ціна">
<input class="order-info-size" type="hidden" name="діаметер">
<input class="form_input" type="text" name="ім'я" placeholder="Ім'я" required>
<input class="form_input" type="text" name="телефон" placeholder="Телефон" required>
<input class="form_input" type="text" name="адреса" placeholder="Адреса" required>
<select name="оплата" class="form_input">
<option value="Оплата при отримані">Оплата при отримані</option>
<option value="Оплата картою">Оплата картою</option>
</select>
<button class="btn form_btn" type="submit">Відправити</button>
</form>
</div>
</div>
</div>
</div>
</div>
