Не могу найти ошибку в js коде, пишу свой сайт для проекта, как исправить до рабочего варианта

Question

Не могу найти ошибку в js коде, пишу свой сайт для проекта, как исправить до рабочего варианта

Марюха Сталкер Ученик (160), открыт 2 недели назад

У каждого из моих товаров есть своя цена, которая указана у него в описании. Я хочу, чтобы при нажатии на кнопку "купить" в разделе "детали покупки" у меня в ценнике была указана та же цена товара, что и в его описании, также нужно чтобы в зависимости от выбранного количества товара менялась и его цена.
const price = document.getElementById('price_purchase'); // цена товара, которая видно в деталях покупки

const firstBtn = document.getElementById('open-modal-btn'); // кнопка купить для 1 товара
const secondBtn = document.getElementById('open-modal-btn2');// кнопка купить для 2 товара
const thirdBtn = document.getElementById('open-modal-btn3');// кнопка купить для 3 товара
const fourthBtn = document.getElementById('open-modal-btn4');// кнопка купить для 4 товара

const firstPrice = document.getElementById('price_legkoe'); // цена 1 товара в его описании
const secondPrice = document.getElementById('price_ushi');// цена 2 товара в его описании
const thirdPrice = document.getElementById('price_koren');// цена 3 товара в его описании
const fourthPrice = document.getElementById('price_aorta');// цена 4 товара в его описании

const counterValue = document.getElementById('counter-value'); // количество товара
//мой не рабочий вариант реализации
if (counterValue>0){
firstBtn.addEventListener('click' ,fopen_btn);
function fopen_btn () {
//price = firstPrice;
price = 14*counterValue;
firstPrice.innerHTML = price;
}
secondBtn.addEventListener('click' ,sopen_btn);
function sopen_btn () {
price = secondPrice*counterValue;
secondPrice.innerHTML = price;
}
thirdBtn.addEventListener('click' ,topen_btn);
function topen_btn () {
price = thirdPrice*counterValue;
thirdPrice.innerHTML = price;
}
fourthBtn.addEventListener('click' ,fhopen_btn);
function fhopen_btn () {
price = fourthPrice*counterValue;
fourthPrice.innerHTML = price;
}
}
else{
firstBtn.addEventListener('click' ,fopen_btn);
function fopen_btn () {
price = firstPrice;
firstPrice.innerHTML = price;
}
secondBtn.addEventListener('click' ,sopen_btn);
function sopen_btn () {
price = secondPrice;
secondPrice.innerHTML = price;
}
thirdBtn.addEventListener('click' ,topen_btn);
function topen_btn () {
price = thirdPrice;
thirdPrice.innerHTML = price;
}
fourthBtn.addEventListener('click' ,fhopen_btn);
function fhopen_btn () {
price = fourthPrice;
fourthPrice.innerHTML = price;
}
}

Answer 1

 const priceElement = document.getElementById('price_purchase'); // элемент, где отображается цена в деталях покупки 
 
const firstBtn = document.getElementById('open-modal-btn'); // кнопка купить для 1 товара 
const secondBtn = document.getElementById('open-modal-btn2'); // кнопка купить для 2 товара 
const thirdBtn = document.getElementById('open-modal-btn3'); // кнопка купить для 3 товара 
const fourthBtn = document.getElementById('open-modal-btn4'); // кнопка купить для 4 товара 
 
const firstPrice = parseFloat(document.getElementById('price_legkoe').textContent); // цена 1 товара в его описании 
const secondPrice = parseFloat(document.getElementById('price_ushi').textContent); // цена 2 товара в его описании 
const thirdPrice = parseFloat(document.getElementById('price_koren').textContent); // цена 3 товара в его описании 
const fourthPrice = parseFloat(document.getElementById('price_aorta').textContent); // цена 4 товара в его описании 
 
const counterValueElement = document.getElementById('counter-value'); // элемент для количества товара 
 
function updatePrice(productPrice) { 
    const quantity = parseInt(counterValueElement.value); // преобразуем значение счетчика в число 
    if (isNaN(quantity) || quantity <= 0) { 
        priceElement.textContent = '0.00'; // если количество невалидно или меньше либо равно 0, отображаем 0.00 
    } else { 
        const totalPrice = productPrice * quantity; 
        priceElement.textContent = totalPrice.toFixed(2); // обновляем цену в элементе и фиксируем до 2 знаков после запятой 
    } 
} 
 
firstBtn.addEventListener('click', function() { 
    console.log("First button clicked"); 
    updatePrice(firstPrice); 
}); 
 
secondBtn.addEventListener('click', function() { 
    console.log("Second button clicked"); 
    updatePrice(secondPrice); 
}); 
 
thirdBtn.addEventListener('click', function() { 
    console.log("Third button clicked"); 
    updatePrice(thirdPrice); 
}); 
 
fourthBtn.addEventListener('click', function() { 
    console.log("Fourth button clicked"); 
    updatePrice(fourthPrice); 
});