Создание кнопок на чистом JS для вывода в input с помощью массива

Рейтинг: 0Ответов: 2Опубликовано: 14.05.2023

Я сделал массив кнопок, но при нажатии на любую кнопку выводит только 0 (то есть, конечное значение в массиве), получается я сделал массив для одной кнопки, как это исправить?

const input = document.createElement('input');
input.type = 'text';
document.body.append(input);

function printBtn() {
    var listBrand = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
  
    for (var i = 0; i < listBrand.length; i++) {
        var btn__1 = document.createElement("button");
        var t = document.createTextNode(listBrand[i]);
        btn__1.appendChild(t);
        document.body.appendChild(btn__1);

        btn__1.addEventListener('click', () => {
            input.value += btn__1.innerText;
            all = input.value.split('');
            console.log(all);
        });
    }
}

printBtn();

javascript
Источник: Stack Overflow на русском

Ответы

▲ 2

Надо написать не

var btn__1 = document.createElement("button");

а

let btn__1 = document.createElement("button");

А лучше уже давным давно забыть про var.

И почитать отличие var, let, const

▲ 0

const input = document.createElement('input');
input.type = 'text';
document.body.append(input);

function printBtn() {
    let listBrand = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
  
    for (let i = 0; i < listBrand.length; i++) {
        let btn__1 = document.createElement("button");
        let t = document.createTextNode(listBrand[i]);
        btn__1.appendChild(t);
        document.body.appendChild(btn__1);

        btn__1.addEventListener('click', () => {
            input.value += btn__1.innerText;
            all = input.value.split('');
            console.log(all);
        });
    }
}

printBtn();