Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   при клике изменить значение следующего input (https://javascript.ru/forum/events/63912-pri-klike-izmenit-znachenie-sleduyushhego-input.html)

kolobku_xxx 07.07.2016 17:31

при клике изменить значение следующего 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;
    }
  }());

рони 07.07.2016 19:21

kolobku_xxx,
почему вы решили что inputs[index].nextSibling == input type="text" ?

kolobku_xxx 07.07.2016 19:33

пробела нет между input-ами
Я ошибаюсь?

рони 07.07.2016 19:37

kolobku_xxx,
есть перевод строки

рони 07.07.2016 19:42

kolobku_xxx,
навигация-только-по-элементам

kolobku_xxx 07.07.2016 19:43

еще раз прочту, спасибо

warren buffet 08.07.2016 16:17

Бред полнейший. Прерывание на щелчок повесь на саму таблицу (на 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;


Блин, каких-только чудес не насмотришься на форумах. )))

warren buffet 08.07.2016 16:32

Заделал. Кстати, идешники не должны быть одинаковые, так чта я их выкосил.

<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>

warren buffet 08.07.2016 16:49

И вообще нафига козе баян, есть же type="number" min="1" max="100500" step="1" и щелкай.

Цитата:

var inputs = document.querySelectorAll("input.plus");
Это хтмл, а хтмл - это дерево. Хавать общим чохом елементы по классам можно только когда есть такая специальная задача, в остальных случаях надо пользоваться деревом, то есть родительскими элементами, дочерними и прочими родственниками. Если скажем разворачивается листинг на 100500 тумбочек и на каждой по 5 кнопок - на все кнопки что ли вешать листенера? Вешаешь на контейнер ровно один и в путь.


Часовой пояс GMT +3, время: 00:12.