Невозможно загрузить данные формы, используя javascript. Ищем отдельный класс и скрываем [i] -й компонент

Question

Я пытаюсь загрузить данные формы, которые пользователь вводит через утилиту, которую я построил на HTML и Node.js. Я определил данные словаря, в которых я собираю данные и добавляю их в полезную нагрузку в определенном формате. Я использую querySelectorAll для поиска отдельных классов, а затем заполняю эти поля в моем разделе данных соответственно. Хотя одни и те же данные дублируются в обеих частях данных разделов A и B (как показано в коде). Может кто-нибудь помочь мне решить эту проблему, так как поля для разделов A и B различны, и мне нужно захватить их обоих. Прикрепление кода, чтобы повторить проблему, а также часть кода html. Например, когда я пытался создать класс MC_IP и искал его с помощью queryselector, я получаю сообщение об ошибке «Невозможно прочитать значение свойства» из неопределенного значения.

JS Часть

    let paylod=''
    const Ctids = document.querySelectorAll('.CONTROLLER_ID');
    const mcIps = document.querySelectorAll('.mc_ip');
    const MCIP = document.querySelectorAll('.MC_IP');
    const mcNetmasks = document.querySelectorAll('.Netmask_IP');
    const mcGateways = document.querySelectorAll('.Gateway_IP');
    const mc = document.querySelectorAll('.RBOD_MC');
    const ec = document.querySelectorAll('.RBOD_EC');
    const fu = document.querySelectorAll('.RBOD_FU');
    const sc = document.querySelectorAll('.RBOD_SC');

    const step = oForm.chassis.value;

        let payload = '';
        //Creating the data elements to be cpatured in the downloaded yaml file 

        for (let i = 0; i < 2; i++) {
const data = {" PDU:": {"PDU_IP":['     PDU_IP',' '+ oForm.ip.value,"   #PDU IP",'  '+'\n'],
          "PDU_LEFT":['     PDU_LEFT',[oForm.lo.value]," # left_outlet(s) ",'   '+'\n'],
          "PDU_RIGHT":['        PDU_RIGHT',[oForm.ro.value]," # right_outlet(s) ", '    '+'\n']
        },  
        "   \n  Controller: # Controller settings ": {  

            "Controller_ID#1": ["       -  # Controller A for RBOD/EBOD"],
                "Netmask IP_A":["           MC_IP",' '+mcIps[i+1].value,'  # RBOD MC IP',''+'\n'],
                "MC_Netmask_A": ["          MC_Netmask",' '+mcNetmasks[i+1].value,'  # RBOD MC Netmask',''+'\n'],
                'MC_Gateway_A':['           MC_Gateway',' '+mcGateways[i+1].value,'  # RBOD MC Gateway',''+'\n'],
                'MC_A': ['          MC',' '+mc[i+1].value,'  # RBOD MC port',''+'\n'],
                'SC_A':['           SC',' '+sc[i+1].value,'  # RBOD SC port',''+'\n'],
                'FU_A':['           FU',' '+fu[i+1].value,'  # RBOD FU port',''+'\n'],
                'EC_A':["           EC",' '+ec[i+1].value,'  # EC port on RBOD or GEM port on JBOD',''+'\n'],
                'Controller_ID#2': ["           ID",' '+Ctids[i+1].value,"  #Controller ID, A or B",''+'\n'],       
            "Controller_ID#3": ['\n'+"      -  # Controller A for RBOD/EBOD"],
                "Netmask IP_B":["           MC_IP",' '+MCIP[i+1].value,'  # RBOD MC IP',''+'\n'],
                "MC_Netmask_B": ["          MC_Netmask",' '+mcNetmasks[i+1].value,'  # RBOD MC Netmask',''+'\n'],
                'MC_Gateway_B':['           MC_Gateway',' '+mcGateways[i+1].value,'  # RBOD MC Gateway',''+'\n'],
                'MC_B': ['          MC',' '+mc[i+1].value,'  # RBOD MC port',''+'\n'],
                'SC_B':['           SC',' '+sc[i+1].value,'  # RBOD SC port',''+'\n'],
                'FU_B':['           FU',' '+fu[i+1].value,'  # RBOD FU port',''+'\n'],
                'EC_B':["           EC",' '+ec[i+1].value,'  # EC port on RBOD or GEM port on JBOD',''+'\n'],
                'Controller_ID#4': ["           ID",' '+Ctids[i+1].value,"  #Controller ID, A or B",''+'\n'],   
        }
      };
      addToPayload(data, '' );
}

<div id="tab1"  class="tabcontent">
<h4>Chasis 1 Details</h4>
<div id="extra" style="display:hidden;">

<h6>Additional Details Required for Controller A</h6>
  <label for='Controller_ID1'>Controller_ID:</label>
  <select class="CONTROLLER_ID" id='Controller_ID1' required>
    <option value=""> - Select the Controller ID - </option>
    <option value='A'>A </select>
  <label for='iSCSI1'>iSCSI IPs:</label><input class="iSCSI_IP" type='text' name='iSCSIip1' id="ip1" placeholder='Enter iSCSI ips' disabled="disabled" />
  <label for='HBA_Ports_A'>HBA_Ports:</label><input class="hba_ports" type='text' id="hba" name='hba_ports1' placeholder='Enter the HBA Ports' disabled="disabled" />
  <label for='MC_IP_A'>MC_IP:</label><input class="mc_ip" type='text' name='extra_ip1' id='mc_ip' placeholder='Enter the MC_IP' />
  <label for='MC_Netmask_A'>MC_Netmask:</label><input class="Netmask_IP" type='text' id='netmask_ip1' placeholder='Enter the MC_Netmask' />
  <label for='MC_Gateway_A'>MC_Gateway:</label><input class="Gateway_IP" type='text' id='gateway_ip1' placeholder='Enter the MC_Gateway' />
  <label for='MC_A'>MC:</label><input class="RBOD_MC" type='text' id='rbod_mc1' placeholder='Enter the MC Port' onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <label for='SC_A'>SC:</label><input class="RBOD_SC" type='text' id='rbod_sc1' placeholder='Enter the SC Port' onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <label for='FU_A'>FU:</label><input class="RBOD_FU" type='text' id='rbod_fu1' placeholder='Enter the FU Port' onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <label for='EC_A'>EC:</label><input class="RBOD_EC" type='text' id='rbod_ec1' placeholder='Enter the EC Port' onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <br>
  <br>
  <h6>Additional Details Required for Controller B</h6>
  <label for='Controller_ID'>Controller_ID:</label>
  <select class="CONTROLLER_ID" id='Controller_ID' required>
    <option value=""> - Select the Controller ID - </option>
    <option value='B'>B </select>
  <label for='iSCSI2'>iSCSI IPs:</label><input class="iSCSI_IP" type='text' name='iSCSIip2' id="ip2" placeholder='Enter iSCSI ips' disabled="disabled" />
  <label for='HBA_Ports'>HBA_Ports:</label><input class="hba_ports" type='text' id="hba1"  placeholder='Enter the HBA Ports' disabled="disabled" />
  <label for='MC_IP_B'>MC_IP:</label><input class="MCIP" type='text'  id='mcip' placeholder='Enter the MC_IP' />
  <label for='MC_Netmask'>MC_Netmask:</label><input class="Netmask_IP" type='text'  id="netmaskip" placeholder='Enter the MC_Netmask' />
  <label for='MC_Gateway'>MC_Gateway:</label><input class="Gateway_IP" type='text'  id="gatewayip" placeholder='Enter the MC_Gateway' />
  <label for='MC'>MC:</label><input class="RBOD_MC" type='text' name='rbod_mc' placeholder='Enter the MC Port' id="rbodmc" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <label for='SC'>SC:</label><input class="RBOD_SC" type='text' name='rbod_sc' placeholder='Enter the SC Port' id="rbodsc" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <label for='FU'>FU:</label><input class="RBOD_FU" type='text' name='rbod_fu' placeholder='Enter the FU Port' id="rbodfu" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />
  <label for='EC'>EC:</label><input class="RBOD_EC" type='text' name='rbod_ec' placeholder='Enter the EC Port' id="rbodec" onkeypress="return (event.charCode > 64 && 
                event.charCode < 91) || (event.charCode > 96 && event.charCode < 123)" />

</div>
</div>

Answer 1

Это происходит потому, что вы используете неправильный индекс для получения элементов из вашего массива HTML элементов. Когда вы пытаетесь получить значение из элемента в массиве, вы используете mc[i+1].value вместо mc[i].value (помните, что массивы в JS начинаются с 0).

Когда вы используете mc[i+1] чтобы получить элемент из массива, ваш индекс превышает максимальный индекс массива HTML элементов, поэтому возвращается undefined.

Таким образом, изменение всех ваших [x+1] на [x] должно решить проблему.