Как вывести по очередно сгенерированные кнопки? [Архив форума]

Просмотр полной версии : Как вывести по очередно сгенерированные кнопки?

mikefromru

01.06.2017, 22:22

У меня есть функция для генерации кнопок из списка mylist. Мне нужно из этого списка получить первые два елемента (кнопки), потом после нажатия мышкой на одну из этих кнопок на их место появлялись следующие два елемента (кнопки) и так далее пока в списке mylist не закончатся элементы.
Я смог реализовать только это, что просто генерит кнопки из моего списка.

<div id="test"></div>

function genButtons(a) {
for (var x = 0; x < a.length; x++) {
var btn = document.createElement('input')
btn.id = 'b' + x;
btn.value = a[x];
btn.type = 'button';
document.getElementById('test').appendChild(btn)

btn.addEventListener('click', function() {
// genButtons(mylist)
})
}
}

var mylist = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']
genButtons(mylist)

рони

01.06.2017, 22:54

mikefromru,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>

</head>

<body>
<div id="test"></div>
<script>
window.addEventListener("DOMContentLoaded", function() {
var x = 0;
function genButtons(a) {
var parent = document.getElementById("test"),
inp = parent.querySelectorAll("[id^='b']");
[].forEach.call(inp, function(btn) {
parent.removeChild(btn)
});
a.slice(0, 2).forEach(function(str) {
var btn = document.createElement("input");
btn.id = "b" + x++;
btn.value = str;
btn.type = "button";
parent.appendChild(btn);
btn.addEventListener("click", function() {
genButtons(a.slice(2))
})
})
}
var mylist = ["one", "two", "three", "four", "five", "six", "seven", "eight",
"nine", "ten"
];
genButtons(mylist)
});
</script>
</body>
</html>

mikefromru

01.06.2017, 23:11

Спасибо!