У меня есть небольшая функция которая генерирует кнопки из массива. Из массива берутся по четыре елемента. После нажатия на любую кнопку, добавляется в поле её(кнопки) значение...... Когда я нажимаю на кнопку то следующие четыре кнопки спускаются вниз и так далее. Как мне это исправить? Нужно чтоб они были на одном месте, не сползали вниз. Вот здесь проблема как я понял кроется, но если это закоментировать то мои кнопки не идут по две в ряд. document.getElementById('_buttons').appendChild(br )
here is my code:
window.addEventListener("DOMContentLoaded", function() {
var x = 0;
function genButtons(a) {
var parent = document.getElementById('_buttons'),
inp = parent.querySelectorAll("[id^='b']");
[].forEach.call(inp, function(btn){
parent.removeChild(btn)
});
a.slice(0, 4).forEach(function(str, x){
var btn = document.createElement("input");
var br = document.createElement("br");
btn.id = "b" + x;
btn.value = str;
btn.type = "button";
btn.className = "btns";
// здесь я делаю по две кнопки в ряд
// но после нажатия на любую из кнопок, следующие кнопки спускаются вниз
if ((x - 2)%2 == 0) {
document.getElementById('_buttons').appendChild(btn)
document.getElementById('_buttons').appendChild(br)
}
parent.appendChild(btn)
btn.addEventListener("click", function(){
genButtons(a.slice(4))
var valueForm = myform.field.value += ' ' + this.value;
// здесь что-нибудь делаю
})
})
}
var something = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten',
'eleven', 'twelve', 'thriteen', 'fourteen', 'fifteen', 'sixteen', 'seventeen', 'eighteen', 'nineteen', 'twenty']
genButtons(something)
})
<body style="background: #2B3D52">
<center>
<form id="myform" onsubmit="foo(); return false;" name='myform' >{% csrf_token %}
<input id="text" name="field" type="text" autocomplete="off" autofocus="on">
</form>
<div id="_buttons"></div>
</center>
</body>