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>