mardi 21 mars 2023

How to check if there are certain consecutive checkboxes checked in javascript and add discount and the opposite

I have a form with 7 checkboxes that have a data-calculate attribute. I want to manipulate the data-attribute value when there are a consecutive 3 to 5 checked. To get the 1st discount and 3 up to 5 or more checkboxes to get the 2nd discount from my form.

I have tried many times to achieve what I want but nothing is working. Also with the else statement is kind of confusing how to remove items and working with the discounts and all.

I am sending you my whole form to check maybe someone can help me finish it.

let _log = (item) => {
  return console.log(item)
}

const week1 = document.querySelector(".c_week_1");
const week2 = document.querySelector(".c_week_2");
const week3 = document.querySelector(".c_week_3");
const week4 = document.querySelector(".c_week_4");
const week5 = document.querySelector(".c_week_5");
const week6 = document.querySelector(".c_week_6");
const week7 = document.querySelector(".c_week_7");

// Getting data attribute value
let week1Calc = week1.dataset.calculate;
let week2Calc = week2.dataset.calculate;
let week3Calc = week3.dataset.calculate;
let week4Calc = week4.dataset.calculate;
let week5Calc = week5.dataset.calculate;
let week6Calc = week6.dataset.calculate;
let week7Calc = week7.dataset.calculate;

// let sum = checkboxesCalculateValuesArray.reduce((accumulator, currentValue) => {
//         return parseInt(accumulator) + parseInt(currentValue);
//     });

// Output price
let price = document.querySelector(".c_final_price_1_kid");

// Initalial num
let count = 0;

// Arrays
// Selecting all inputs
let allCheckboxes = [week1, week2, week3, week4, week5, week6, week7];
// Selecting all inputs data-calculate value
let allCheckboxesCalcValues = [week1Calc, week2Calc, week3Calc, week4Calc, week5Calc, week6Calc, week7Calc];
// Adding all inputs that are checked
let checkboxesCheckedArray = [];
// Getting checkboxesCheckedArray index numbers
let checkboxesCheckedArrayNumbers = [];
// Adding the checked checkbox data-calculate attribute in the array
let checkboxesCalculateValuesArray = [];


// Selecting all checkboxes and their index
allCheckboxes.forEach((box, index) => {

  box.addEventListener("change", (e) => {

    if (box.checked) {

      // Check how many checkboxes are checked
      count++;

      // console.log(count)

      // Adding checked checkboxes to the array
      checkboxesCheckedArray.push(box);

      // Adding checked index to the array
      checkboxesCheckedArrayNumbers.push(index);

      // Sorting numbers array 
      checkboxesCheckedArrayNumbers.sort();

      checkboxesCalculateValuesArray.push(e.target.dataset.calculate);

      price.textContent = checkboxesCalculateValuesArray.reduce((accumulator, currentValue) => {
        return parseInt(accumulator) + parseInt(currentValue);
      });


      for (let i = 1; i < checkboxesCheckedArrayNumbers.length - 1; i++) {

        // Here are the 2 if statements. I am looking for consecutive checkboxes. 3 up to 5 and 3 up to 7

        // Check if 3 or more are in cunsecutive order
        if (checkboxesCheckedArrayNumbers[i - 1] === checkboxesCheckedArrayNumbers[i] - 1 && checkboxesCheckedArrayNumbers[i + 1] ===
          checkboxesCheckedArrayNumbers[i] + 1) {

          // When there are 3 up to 5 consecutive weeks then loop here to change data-calculate values to 84.15

          price.textContent = checkboxesCalculateValuesArray.reduce((accumulator, currentValue) => {
            return parseInt(accumulator) + parseInt(currentValue);
          });

          _log(checkboxesCalculateValuesArray)


        }


        // Check if 5 or more are in cunsecutive order
        if (checkboxesCheckedArrayNumbers[i - 2] === checkboxesCheckedArrayNumbers[i] - 2 && checkboxesCheckedArrayNumbers[i + 2] ===
          checkboxesCheckedArrayNumbers[i] + 2) {



        }

        // end of Check if 5 or more are in cunsecutive order

      }
      // End for loop


    } else {

      count--;

      console.log(count);

      // Adding checked checkboxes to the array
      checkboxesCheckedArray.pop(box);

      // Adding checked index to the array
      checkboxesCheckedArrayNumbers.pop(index);

      // Sorting numbers array 
      checkboxesCheckedArrayNumbers.sort();

      checkboxesCalculateValuesArray.pop(e.target.dataset.calculate);

      for (let i = 1; i < checkboxesCheckedArrayNumbers.length - 1; i++) {
        // Check if 3 or more are in cunsecutive order
        if (checkboxesCheckedArrayNumbers[i - 1] === checkboxesCheckedArrayNumbers[i] - 1 && checkboxesCheckedArrayNumbers[i + 1] ===
          checkboxesCheckedArrayNumbers[i] + 1) {


        }
        // END OF Check if 5 or more are in cunsecutive order

        // Check if 5 or more are in cunsecutive order

        if (checkboxesCheckedArrayNumbers[i - 2] === checkboxesCheckedArrayNumbers[i] - 2 && checkboxesCheckedArrayNumbers[i + 2] ===
          checkboxesCheckedArrayNumbers[i] + 2) {



        }

      }

    }

  })

})

let customForm = document.getElementsByTagName("form")[0];
const submitButton = document.querySelector(".c-main-calc-submit--button");
// _log(submitButton)

customForm.addEventListener("submit", (e) => {
  customForm.submit();
})
<form id="form">
  <div class="c-checkbox-box">
    <span>1</span>
    <input type="checkbox" class="c_week_1" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>2</span>
    <input type="checkbox" class="c_week_2" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>3</span>
    <input type="checkbox" class="c_week_3" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>4</span>
    <input type="checkbox" class="c_week_4" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>5</span>
    <input type="checkbox" class="c_week_5" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>6</span>
    <input type="checkbox" class="c_week_6" data-calculate="99">
  </div>
  <div class="c-checkbox-box">
    <span>7</span>
    <input type="checkbox" class="c_week_7" data-calculate="99">
  </div>
</form>

<div class="c_final_price_1_kid"></div>



Aucun commentaire:

Enregistrer un commentaire