javascript CODE.log 2019.4.14

Posted 2021-05-03

/**
 * オブジェクトを key: value で 保持する際、
 * click発火で、 value値に代入は 更新されなかった..
 *
 *  NG: 
 *   let form = {
 *     op3_sumElm: document.getElementById(`sum_op3-${i}`).innerText,
 *   .. }
 *   form.basePrice3 = hoge
 *
 *  OK: 
 *   let form = {
 *     op3_sumElm: document.getElementById(`sum_op3-${i}`),
 *   .. }
 *   form.basePrice3.innerText = hoge 
 **/

// Total
const forms = document.forms;
for (let i = 0; i < forms.length; i++) {
  let sum_op3=0, sum_op5=0;
  const e = forms[i];
  e.name = i
  document.getElementById(`base3-${i}`).innerText = addFigure( document.getElementById(`base3-${i}`).innerText )
  document.getElementById(`base5-${i}`).innerText = addFigure( document.getElementById(`base5-${i}`).innerText )
  document.getElementById(`total3-${i}`).innerText = addFigure( document.getElementById(`base3-${i}`).innerText )
  document.getElementById(`total5-${i}`).innerText = addFigure( document.getElementById(`base5-${i}`).innerText )
  // options loop in each forms
  let form = {
    basePrice3 : document.getElementById(`base3-${i}`).innerText,
    basePrice5 : document.getElementById(`base5-${i}`).innerText,
    op3_sumElm: document.getElementById(`sum_op3-${i}`),
    op5_sumElm: document.getElementById(`sum_op5-${i}`),
    total3_elm: document.getElementById(`total3-${i}`),
    total5_elm: document.getElementById(`total5-${i}`),
    options : document.forms[i].elements["options"],
  }
  for(let j=0; j < form.options.length; j++){
    let option = form.options[j];
    console.log(`option : ${JSON.stringify(option)}`)
    option.addEventListener('click', e => {
        console.log('click')
        const el = {
          checked : e.target.checked,
          title: e.target.value.split(',')[0],
          op3 : +e.target.value.split(',')[1],
          op5 : +e.target.value.split(',')[2],
        }
        // click-on, chlick-off
        if(el.checked) {
          // First arg "0"
          form.op3_sumElm.dataset.from = sum_op3
          form.op5_sumElm.dataset.from = sum_op5
          sum_op3 += el.op3
          sum_op5 += el.op5

          // TotalOption. AddFigure
          let sumOp_datafrom3 = form.op3_sumElm.innerText = addFigure(sum_op3);
          let sumOp_datafrom5 = form.op5_sumElm.innerText = addFigure(sum_op5);

          form.op3_sumElm.dataset.to = form.total3_elm.innerText = removeFigure(sumOp_datafrom3)
          form.op5_sumElm.dataset.to = form.total5_elm.innerText = removeFigure(sumOp_datafrom5)

          form.total3_elm.dataset.from = removeFigure(sumOp_datafrom3)
          form.total5_elm.dataset.from = removeFigure(sumOp_datafrom5)
          form.total3_elm.dataset.to = form.total3_elm.innerText = removeFigure(form.basePrice3) + removeFigure(sumOp_datafrom3)
          form.total5_elm.dataset.to = form.total5_elm.innerText = removeFigure(form.basePrice5) + removeFigure(sumOp_datafrom5)
          countUp(`sum_op3-${i}`)
          countUp(`sum_op5-${i}`)
          countUp(`total3-${i}`)
          countUp(`total5-${i}`)

          /** set data */
          let setLists = document.getElementById(`set-list-${i}`)
          setLists.insertAdjacentHTML('beforeend',`<li id="choiceData_form${i}_op${j}">${el.title},${el.op3}円(3年), ${el.op5}円(5年), </li>`)
          document.forms[i].elements['options-all'].innerText = setLists.innerText

        }else {
          form.op3_sumElm.dataset.from = sum_op3
          form.op5_sumElm.dataset.from = sum_op5
          sum_op3 -= el.op3
          sum_op5 -= el.op5

          // TotalOption. AddFigure
          let sumOp_datafrom3 = form.op3_sumElm.innerText = addFigure(sum_op3);
          let sumOp_datafrom5 = form.op5_sumElm.innerText = addFigure(sum_op5);

          form.op3_sumElm.dataset.to = form.total3_elm.innerText = removeFigure(sumOp_datafrom3)
          form.op5_sumElm.dataset.to = form.total5_elm.innerText = removeFigure(sumOp_datafrom5)

          form.total3_elm.dataset.from = removeFigure(sumOp_datafrom3)
          form.total5_elm.dataset.from = removeFigure(sumOp_datafrom5)
          form.total3_elm.dataset.to = form.total3_elm.innerText = removeFigure(form.basePrice3) + removeFigure(sumOp_datafrom3)
          form.total5_elm.dataset.to = form.total5_elm.innerText = removeFigure(form.basePrice5) + removeFigure(sumOp_datafrom5)
          countUp(`sum_op3-${i}`)
          countUp(`sum_op5-${i}`)
          countUp(`total3-${i}`)
          countUp(`total5-${i}`)

          // remove set data 
          let setLists = document.getElementById(`set-list-${i}`)
          let setOption = document.getElementById(`choiceData_form${i}_op${j}`)
          setOption.parentNode.removeChild(setOption)
          document.forms[i].elements['options-all'].innerText = setLists.innerText
        }
    })// END click Event
  }// END for: options
} // END for in froms