Форум

mikefromru · #1 (**permalink**) 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)

рони · #2 (**permalink**) 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 · #3 (**permalink**) 01.06.2017, 23:11

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript