при клике изменить значение следующего input
Добрый день!
Алерт сообщает, что значение сменилось в соседнем элементе, а на странице как был 0 в поле, так и остается. Помогите пожалуйста:) <table> <tr> <td class="item_count"><input type="button" value="+" class="plus" /> <input type="text" id="item1" value="0"/> <input type="button" value="-" class="minus" /> </td> </tr> <tr> <td class="item_count"><input type="button" value="+" class="plus" /> <input type="text" id="item1" value="0"/> <input type="button" value="-" class="minus" /> </td> </tr> </table> (function () { var inputs = document.querySelectorAll("input.plus"); /*взяли все инпуты с классом plus*/ var handler = function() { var index = this.getAttribute('data-index'); /*записали в переменную индекс элемента массива*/ alert(index); /* var next_elem = inputs[index].nextSibling;*/ inputs[index].nextSibling.value = 1; alert( inputs[index].nextSibling.value); } for (var i = 0; i < inputs.length; i++) { /*каждому элементу массива повешали обработчик*/ inputs[i].setAttribute('data-index', i); inputs[i].onclick = handler; } }()); (function () { var inputs = document.querySelectorAll("input.minus"); var handler = function() { var index = this.getAttribute('data-index'); alert(index); } for (var i = 0; i < inputs.length; i++) { inputs[i].setAttribute('data-index', i); inputs[i].onclick = handler; } }()); |
kolobku_xxx,
почему вы решили что inputs[index].nextSibling == input type="text" ? |
пробела нет между input-ами
Я ошибаюсь? |
kolobku_xxx,
есть перевод строки |
kolobku_xxx,
навигация-только-по-элементам |
еще раз прочту, спасибо
|
Бред полнейший. Прерывание на щелчок повесь на саму таблицу (на tbody) и напиши простейший контроллер. Щелчок мыши поднимается до таблицы и this не бери, а бери event.targed и проверяй, что она - кнопка. Теперь если кнопка, то значит относительно родительского элемента - td - мы можем искать инпут типа текст:
/* после проверки на бутон */ var button = e.target; var input_text= button.parentNode.querySelector('input[type="text"]'); Теперь просто если валуе кнопки черточка, то декремент, а если крестик - то инкремент input_text.value=input_text.value+(button.value=='-')?-1:1; Блин, каких-только чудес не насмотришься на форумах. ))) |
Заделал. Кстати, идешники не должны быть одинаковые, так чта я их выкосил.
<table id='my-table'> <tr> <td class="item_count"><input type="button" value="+" class="plus" /> <input type="text" value="0"/> <input type="button" value="-" class="minus" /> </td> </tr> <tr> <td class="item_count"><input type="button" value="+" class="plus" /> <input type="text" value="0"/> <input type="button" value="-" class="minus" /> </td> </tr> </table> <script> (function(){ var tbody = document.querySelector('#my-table tbody'), run=function(e){ if(e.target.type!='button') return; var button=e.target, text=button.parentNode.querySelector('input[type="text"]'); text.value=+text.value+parseInt(button.value+'1'); }; tbody.addEventListener('click',run); } )(); </script> |
И вообще нафига козе баян, есть же type="number" min="1" max="100500" step="1" и щелкай.
Цитата:
|
Часовой пояс GMT +3, время: 00:12. |