Я пытаюсь создать простой проект, в котором пользователю предлагается ввести, сколько чисел он хотел бы добавить (сумма). затем, когда он нажмет кнопку, javascript создаст количество тегов ввода, равное количеству, которое он вставил, а затем он заполнит их числом и нажмет другую кнопку, чтобы вычислить результат суммирования, и вот в чем проблема. Ниже приведен упрощенный фрагмент, объясняющий, в чем проблема:

function CL(){
        const items = document.getElementById("items");
        for (var i = 1; i < 3; i++) {
              const inpt = document.createElement("input");
              inpt.setAttribute("type","text");
              inpt.setAttribute("style","margin:5px;");
              inpt.setAttribute("id","y"+i);
              inpt.setAttribute("value","");
              const newline = document.createElement("br");
              items.appendChild(inpt);
              items.appendChild(newline);
            }
    }

    function Add(){
        const y = 0;
        const sum = 0;
        var is;
        for (var i = 1; i < 3; i++) {
            is = i.toString();
         y = Number(document.getElementById('y'+ is).value);
         sum = sum + y;
    }
        document.getElementById("demo").innerHTML = sum;
    }

В цикле for, как я могу использовать getElementById с переменными id, такими как item1, item2, item3, ..., itemN ?? есть ли другой способ достичь того, чего я хочу?

0
Moe Kronz 5 Дек 2020 в 23:20

2 ответа

Лучший ответ

По этому пути вы можете взять все товары с идентификатором "y" + префиксом порядкового номера document.getElementById('y' + i).value;

Не используйте "Добавить" для имени функции, и функции не должны начинаться с заглавных букв!

calckStart();

function calckStart() {
    const items = document.getElementById("items");
    for (var i = 1; i < 3; i++) {
        const inpt = document.createElement("input");
        inpt.setAttribute("type", "text");
        inpt.setAttribute("style", "margin:5px;");
        inpt.setAttribute("id", "y" + i);
        inpt.setAttribute("value", "");
        const newline = document.createElement("br");
        items.appendChild(inpt);
        items.appendChild(newline);
    }

    var button = document.createElement('button');
    button.innerHTML = 'ClickMe'
    items.appendChild(button);

    button.addEventListener('click', calculateVal);
}

function calculateVal() {
    var res = 0;
    for (var i = 1; i < 3; i++) {
        res = res + +document.getElementById('y' + i).value;
    }

    var items = document.getElementById("items");
    var result = document.createElement('div');
    result.innerHTML = res;
    items.appendChild(result);
}
<div id="items"></div>

Лучше ...

При создании элементов вы можете присвоить им атрибут CLASS, который является единым для всех входных элементов. Затем вы можете взять значения из всех элементов с этим классом.

Пример:

        
calckStart();

function calckStart() {
    const items = document.getElementById("items");
    for (var i = 1; i < 3; i++) {
        const inpt = document.createElement("input");
        inpt.setAttribute("type", "text");
        inpt.setAttribute("style", "margin:5px;");
        // inpt.setAttribute("id", "y" + i);
        inpt.setAttribute("value", "");
        inpt.setAttribute("class", "numbers");  //<-- Set class
        const newline = document.createElement("br");
        items.appendChild(inpt);
        items.appendChild(newline);
    }

    var button = document.createElement('button');
    button.innerHTML = 'ClickMe'
    items.appendChild(button);

    button.addEventListener('click', calculateVal);
}

function calculateVal() {
    var list = document.getElementsByClassName('numbers'); //<-- Get by class
    var res = 0;
    for (var i = 0; i < list.length; i++) {
        res = res + +list[i].value;
    }

    var items = document.getElementById("items");
    var result = document.createElement('div');
    result.innerHTML = res;
    items.appendChild(result);
}
<div id="items"></div>
0
54ka 5 Дек 2020 в 21:23

Вы можете использовать ...args для сбора аргументов и использовать .reduce для сложения аргументов.

const items = document.getElementById("items");
for (var i = 0; i < 3; i++) {
  var inpt = document.createElement("input");
  inpt.setAttribute("type","number"); //replaced with number
  inpt.setAttribute("style","margin:5px;");
  inpt.setAttribute("id","y"+i);
  inpt.setAttribute("value","");
  var newline = document.createElement("br");
  items.appendChild(inpt);
  items.appendChild(newline); //added newline appending
}
function sum(...args) {
  return args.reduce((a, b) => a+b); //reduce arguments
}
<div id="items"></div><br /><button onclick="document.getElementById('answer').textContent = 'answer: ' + sum(+y0.value, +y1.value, +y2.value)">Add</button><div id="answer"></div>
0
Lemondoge 5 Дек 2020 в 20:47