Hello, WebFlow community
I need your HELP
I have product price calculator on my site.
It’s look like contact form. I have custom code, for this form and it work, but, I have problem with security. It’s my first project in WebFlow and I dont understand how I should improve my code.
My code:
document.addEventListener(‘DOMContentLoaded’, (e) => {
let radioButtons = document.querySelectorAll(“.w-radio-input”);
let checkboxs = document.querySelectorAll(‘.w-checkbox-input’);
let priceHolder = document.querySelector(‘#total-price’)
let startPrice = parseInt(priceHolder.innerText, 10)
let state = ;
let resultPrice = startPrice;
checkboxs.forEach((item) => {
item.addEventListener(‘click’, (e) => {
const obj = e.target
const objPrice = parseInt(obj.getAttribute(‘add-value’), 10);
if (state.indexOf(obj.dataset.name) === -1) {
state.push(e.target.dataset.name);
resultPrice += objPrice;
priceHolderPush();
} else {
const delIndex = state.indexOf(obj.dataset.name);
state.splice(delIndex, 1);
resultPrice -= objPrice;
priceHolderPush();
}
})
})
radioButtons.forEach((item) => {
if (item.checked) {
let obj = {}
obj[item.name] = item.value;
obj.price = parseInt(item.getAttribute(‘add-value’), 10);
state.push(obj);
}
item.addEventListener(‘click’, (e) => {
let radioHTML = e.target;
let obj = state.find( key => Object.keys(key)[0] === radioHTML.name );
if (obj[radioHTML.name] !== radioHTML.value) {
obj[radioHTML.name] = radioHTML.value;
let addPrice = parseInt(radioHTML.getAttribute(‘add-value’), 10)
resultPrice += addPrice;
resultPrice -= obj.price;
obj.price = addPrice;
priceHolderPush();
}
})
})
function priceHolderPush() {
priceHolder.innerText = `${resultPrice}`;
}
})
Here is my site Read-Only:
https://preview.webflow.com/preview/lifestyle-camper?utm_medium=preview_link&utm_source=designer&utm_content=lifestyle-camper&preview=78a0fec2a1b18bc735a35f88c2bb3fd4&pageId=618a0f5cd23c7312d214efe0&workflow=preview
Thank you!