December 8, 2021
Калькулятор с "количеством"
Видео: https://www.youtube.com/watch?v=yEwhHIt39MM
<style>
.hiddenlol {
display: none;
}
.disabled
{
opacity: 0.6 !important;
pointer-events: none !important;
}
input[type="number"] {
opacity: 1;
pointer-events: !important;
}
.amount {
pointer-events: none !important;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
localStorage.clear();
var pointer = Array.from(document.querySelectorAll('.form-field label')).find(el => el.textContent === 'Сумма покупки:');
pointer.parentElement.querySelector('input').classList.add('amount');
var cnt = Array.from(document.querySelectorAll('.form-field label')).find(el => el.textContent === 'Count');
cnt.parentElement.parentElement.style.display='none';
});
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('.form-field input[name="number"]')).map((numbers) => {
numbers.classList.add('disabled');
numbers.value = 0;
});
});
document.addEventListener('DOMContentLoaded', () => {
Array.from(document.querySelectorAll('.form-field input[type="checkbox"]')).map((kekbox) => {
kekbox.onchange = function checkVal() {
var checkboxes = document.querySelectorAll('.form-field input[type="checkbox"]');
var amount = 0;
for(var i = 0, dl = checkboxes.length; i < dl; i++) {
if (checkboxes[i].checked) {
var parsedcheckbox = checkboxes[i].parentElement.parentElement.querySelector('.form-field-desc').textContent.match(/\d/g);
var count = checkboxes[i].parentElement.parentElement;
var inputcount = count.parentElement.parentElement.nextSibling.querySelector('input[name="number"]');
inputcount.classList.remove('disabled');
var parsedcount = inputcount.value.match(/\d/g);
parsedcheckbox = parsedcheckbox.join("");
if (inputcount.value == 0 || isNaN(inputcount.value)) {
inputcount.value = 1;
var amount = parsedcheckbox*1 + amount;
localStorage.setItem('amount', amount);
}
var amount = parsedcheckbox*1*parsedcount + amount;
localStorage.setItem('amount', amount);
var total = Array.from(document.querySelectorAll('.form-field label'))
.find(el => el.textContent === 'Сумма покупки:');
total.parentElement.querySelector('input').value = amount;
total.parentElement.querySelector('input').classList.add('amount');
}
else {
var count = checkboxes[i].parentElement.parentElement;
var inputcount = count.parentElement.parentElement.nextSibling.querySelector('input[name="number"]');
inputcount.value = 0;
inputcount.classList.add('disabled');
var total = Array.from(document.querySelectorAll('.form-field label'))
.find(el => el.textContent === 'Сумма покупки:');
total.parentElement.querySelector('input').value = amount;
}
}
};
});
Array.from(document.querySelectorAll('.form-field input[name="number"]')).map((numbers) => {
numbers.onchange = function numCheck() {
var amount = 0;
var counter = document.querySelectorAll('.form-field input[name="number"]');
for(var i = 0, dl = counter.length; i < dl; i++) {
var parsedcheckbox = counter[i].parentElement.parentElement.previousSibling.querySelector('.form-field-desc').textContent.match(/\d/g);
parsedcheckbox = parsedcheckbox.join("");
var chbvalidator = counter[i].parentElement.parentElement.previousSibling.querySelector('.form-field input[type="checkbox"]');
if (chbvalidator.checked) {
if (counter[i].value == 0 || isNaN(counter[i].value)) {
counter[i].value = 1;
}
}
var count = counter[i].value;
var amount = parsedcheckbox*1*count + amount;
localStorage.setItem('amount', amount);
var total = Array.from(document.querySelectorAll('.form-field label')).find(el => el.textContent === 'Сумма покупки:');
total.parentElement.querySelector('input').value = amount;
}
};
});
});
setInterval(function(){
Array.from(document.querySelectorAll('.disabled')).map((disabled) => {
disabled.value = 0;
});
Array.from(document.querySelectorAll('.form-field input[type="checkbox"]:checked')).map((validator) => {
var count = validator.parentElement.parentElement;
var inputcount = count.parentElement.parentElement.nextSibling.querySelector('input[name="number"]');
inputcount.classList.remove('disabled');
var parsedcount = inputcount.value.match(/\d/g);
if (inputcount.value == 0 || isNaN(inputcount.value)) {
inputcount.value = 1;}
});
var amount = localStorage.getItem('amount');
console.log(amount);
var total = Array.from(document.querySelectorAll('.form-field label')).find(el => el.textContent === 'Сумма покупки:');
total.parentElement.querySelector('input').value = amount;
}, 1000);
</script>