How to iterate children of HTML element in JS-CodePudding


<div >
        <input type="text" id="title" placeholder="tilte">
        <div >
            <input type="number" id="price" placeholder="price">
            <input type="number" id="taxes" placeholder="taxes">
            <input type="number" id="ads" placeholder="ads">
            <input type="number" id="discount" placeholder="discount">
</div>

i want to iterate every element inside parent "inputs" of HTML into JS.. like using (for) or (forEach) without writing every child :

let title = document.getelementbyid("title");
let price = document.getelementbyid("price");

CodePudding user response：

Not sure what exactly you are trying to achieve. Maybe you want to make your life a little easier with the selectors by id. If that's the case, you might like this approach:

const getElementById = (id = "") => {
    return document.getElementById(id);
};

const getElementsById = (ids = []) => {
    return ids.map(getElementById);
};

const getElementsByIdMap = (ids = []) => {
    return Object.fromEntries(ids.map((id) => [id, getElementById(id)]));
};

const getElementValue = (el = {}) => {
    return el?.value;
};

const elements = getElementsById([
    "title",
    "price",
    "taxes",
    "ads",
    "discount",
    "total",
    "count",
    "category",
    "submit",
]);

elements.forEach((el) => {
    console.log(el);
});

const { title, price, taxes, ads, discount, total, count, category, submit } = getElementsByIdMap([
    "title",
    "price",
    "taxes",
    "ads",
    "discount",
    "total",
    "count",
    "category",
    "submit",
]);

const myFormElements = getElementsByIdMap(["title", "price", "taxes", "ads", "discount", "total", "count", "category"]);

getElementById("submit").addEventListener("click", (ev) => {
    ev.preventDefault(); // maybe
    const values = Object.fromEntries(
        myFormElements.keys(myFormElements).map((key) => [key, getElementValue(myFormElements[key])])
    );

    console.log(values);
});

And one of the easiest hacks for HTML forms is this:

document.getElementById("submitFormId").addEventListener("submit", (event) => {
    event.preventDefault();
    const values = Array.from(event.target)
        .slice(0, 8) // in your case there are 9 elements, last is submit with index 8 so we cut it
        .map((input) => input.value.trim()); // trim all the values to exclude spaces
    console.log(values);
});

CodePudding user response：

You can use querySelectorAll and get classes by using . e.g. .my_class, ids using # e.g. #my_id or html elements without any symbol, e.g. input.

For your case, to get all elements input from your class .inputs, would be like this:

var inputs = document.querySelectorAll('.inputs input');

inputs.forEach((element) => {
  // To get the value, you need to use .value
  console.log(element.value)
});

<div >
  <input type="text" value="1" />
  <input type="text" value="2" />
  <input type="text" value="3" />
</div>

<div id="result"></div>