Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 14.06.2017, 20:22
Интересующийся
Отправить личное сообщение для mikefromru Посмотреть профиль Найти все сообщения от mikefromru
 
Регистрация: 23.11.2016
Сообщений: 13

Как зафиксировать кнопки чтобы они оставались на одном месте?
У меня есть небольшая функция которая генерирует кнопки из массива. Из массива берутся по четыре елемента. После нажатия на любую кнопку, добавляется в поле её(кнопки) значение...... Когда я нажимаю на кнопку то следующие четыре кнопки спускаются вниз и так далее. Как мне это исправить? Нужно чтоб они были на одном месте, не сползали вниз. Вот здесь проблема как я понял кроется, но если это закоментировать то мои кнопки не идут по две в ряд. 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>
Ответить с цитированием
  #2 (permalink)  
Старый 14.06.2017, 22:12
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

document.getElementById('_buttons').appendChild(br )
убрать вот эту строку!
Ответить с цитированием
  #3 (permalink)  
Старый 14.06.2017, 22:19
Интересующийся
Отправить личное сообщение для mikefromru Посмотреть профиль Найти все сообщения от mikefromru
 
Регистрация: 23.11.2016
Сообщений: 13

Сообщение от j0hnik Посмотреть сообщение
document.getElementById('_buttons').appendChild(br )
убрать вот эту строку!
Но тогда кнопки по две в ряд не идут.
Ответить с цитированием
  #4 (permalink)  
Старый 14.06.2017, 22:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,788

mikefromru,
1 способ: перенести строку 12 в строку 2.
2 способ: дополнить селектор в строке 6.
Ответить с цитированием
  #5 (permalink)  
Старый 14.06.2017, 23:04
Интересующийся
Отправить личное сообщение для mikefromru Посмотреть профиль Найти все сообщения от mikefromru
 
Регистрация: 23.11.2016
Сообщений: 13

Сообщение от рони Посмотреть сообщение
mikefromru,
1 способ: перенести строку 12 в строку 2.
Спасибо!
Ответить с цитированием
  #6 (permalink)  
Старый 14.06.2017, 23:15
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,788

mikefromru,
2
inp = parent.querySelectorAll("[id^='b'], #_buttons br");
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как на лету в input разделить цифры, чтобы они приняли вид даты? drkrol Общие вопросы Javascript 3 19.04.2017 16:23
Как создать цитатник? WGN Общие вопросы Javascript 10 29.01.2017 00:39
Дайте им 200 и они счастливы, как насчет 307? kostyanet Общие вопросы Javascript 20 28.10.2014 02:27
HTML5 Как сделать, чтобы можно было двигать картинку мышью? Бобр Общие вопросы Javascript 2 18.06.2010 20:22
Как сделать, чтобы 2 ссылки отображались как hover при наведении мышкой на любую? Ava Элементы интерфейса 5 19.05.2009 22:24