Get Elements of a HTML div

Question

i am building a configuration utility and having a problem with the js. I am very new to javascript so i apologize in advance for the request for help.

in my HTML i have multiple divs that are structured like this:

  <div id="options" class="opt">
      <h2 id="optionName">Power Button Options</h2>
      <label for="pwrAvl">Power Button Available</label>
      <input type="checkbox" name="pwrAvl" id="pwrAvl"/ >
      <br /><br />
      <label for="pwrLabel">Power Button Label</label>
      <input type="text" name="pwrLabel" id="pwrLabel"/ >
      <br /><br />
      <label for="pwrGraphic">Power Button Graphic</label>
      <select name="pwrGraphic" id="pwrGraphic">
        <option value="" selected>
          ----- Please select a graphic -----
        </option>
        <option value="power.jpeg">Power</option>
        <option value="light.jpg">Light</option>
        <option value="help.jpg">Help</option>
        <option value="camera.jpg">Camera</option>
      </select>
      <br /><br />
      <label for="pwrIndex">Power Button Menu Index</label>
      <input type="text" name="pwrIndex" id="pwrIndex"/ >
    </div>

i have between 5-10 divs that will all be structured the same way just with different labels and input values.

i tried adding all the divs to an array and then enumerate through the array but that did not work.

here is my js file what i have tried:

{
const bar = document.querySelector('options');

var opts = document.querySelectorAll('.opt')

var option = {}


var nCount = $(".opt").length;

var divArray = [];



var optName = document.getElementById('optionName');

function addArray() {

    for (let i = 0; i < nCount; i++) {
        divArray[i] = opts[i];
    }
}

const saveBtn = document.getElementById('submit');
saveBtn.addEventListener('click', (e) => {
    putSettings();
});

function SystemOptions(optionName, optionAvailable, optionLabel, optionGraphic, optionIndex) {

    this.optionName = optionName;
    this.optionAvailable = optionAvailable;
    this.optionLabel = optionLabel;
    this.optionGraphic = optionGraphic;
    this.optionIndex = optionIndex;
}

async function putSettings() {
    let info = {
        "SystemConfiguration": {
            "Options": [],
        }
    }

    addArray()
    console.log(`Divarray  = ${divArray.length}`)


    //The following would never work
    opts.forEach(label => {
    
        $('[id=optionName]').each(function () {
            var atId = this.id;
            console.log(`Searched Name  = ${atId.innerHTML}`)
        });

    });


    divArray.forEach(element => {
    
        var name = divArray.getElementById('optionName').innerHTML;

        console.log(name)

        option = new SystemOptions(name, "yes", "Help Label", "Option.jpeg", 3);
        info.SystemConfiguration.Options.push(option);

    });


    for (let i = 0; i < nCount; i++) {

        // console.log(` ${$(".opt").find("h2[id=optionName").each.text()}`)
        console.log(` ${divArray[i].querySelector(optName[i]).innerHTML}`)


    }


    // i did this once to see if the SystemsOptions function worked
    // obviosly it added the same data 7 times but i was trying to be sure the function worked and created the json objects

    for (let i = 1; i < nCount; i++) {
        option = new SystemOptions("Power", "yes", "Help Label", "Option.jpeg", 3);
        info.SystemConfiguration.Options.push(option);
    }



    let data = JSON.stringify(info, 0, 4);
    console.log(data);




}

}

any help would be greatly appreciated.

Answer 1

not the most eloquent but this does work.

sure there are better ways:

var opts  = document.querySelectorAll('.opt');

var option = {};


const saveBtn = document.getElementById('submit');
saveBtn.addEventListener('click', (e) => {
putSettings();
});

function SystemOptions(optionName, optionAvailable, optionLabel, optionGraphic, optionIndex) { 

    this.optionName = optionName;
    this.optionAvailable = optionAvailable;
    this.optionLabel = optionLabel;
    this.optionGraphic = optionGraphic;
    this.optionIndex = optionIndex;        
}

async function putSettings() {
     let info = {
         "SystemConfiguration" :{
         "Options": [],
            }
        };

for(var opt of opts)
{
    var name  = opt.getElementsByTagName('h2')[0].innerHTML;
    let isAvailable = opt.getElementsByTagName("input")[0].value;
    let optLabel = opt.getElementsByTagName("input")[1].value;
    let optGraphic = opt.getElementsByTagName('select')[0].value;
    let index = opt.getElementsByTagName("input")[2].value;

    option = new SystemOptions(name, isAvailable, optLabel, optGraphic, index);
    info.SystemConfiguration.Options.push(option);
}

console.log(`Number of options = ${opts.length}`)

let data = JSON.stringify(info, 0, 4);
    console.log(data);
};