Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2016, 17:31
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

при клике изменить значение следующего 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, 07.07.2016 в 19:42.
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2016, 19:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

kolobku_xxx,
почему вы решили что inputs[index].nextSibling == input type="text" ?
Ответить с цитированием
  #3 (permalink)  
Старый 07.07.2016, 19:33
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

пробела нет между input-ами
Я ошибаюсь?
Ответить с цитированием
  #4 (permalink)  
Старый 07.07.2016, 19:37
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

kolobku_xxx,
есть перевод строки
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2016, 19:42
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,076

kolobku_xxx,
навигация-только-по-элементам
Ответить с цитированием
  #6 (permalink)  
Старый 07.07.2016, 19:43
Интересующийся
Отправить личное сообщение для kolobku_xxx Посмотреть профиль Найти все сообщения от kolobku_xxx
 
Регистрация: 04.07.2016
Сообщений: 18

еще раз прочту, спасибо
Ответить с цитированием
  #7 (permalink)  
Старый 08.07.2016, 16:17
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

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


Блин, каких-только чудес не насмотришься на форумах. )))
Ответить с цитированием
  #8 (permalink)  
Старый 08.07.2016, 16:32
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

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

<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:43.
Ответить с цитированием
  #9 (permalink)  
Старый 08.07.2016, 16:49
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

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

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

Последний раз редактировалось warren buffet, 08.07.2016 в 16:53.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
При отметке checkbox заполнение поля input text значением из друого поля на странице mxup Элементы интерфейса 21 27.12.2017 13:43
При клике ссылки, открыть DIV блок, и при клике ещё раз, закрыть его Simon Общие вопросы Javascript 59 28.05.2017 17:31
Исчезновение меню при клике на ссылку wiserfild Элементы интерфейса 4 24.10.2015 19:50
Изменить атрибут при клике grisha2217 Общие вопросы Javascript 7 31.03.2014 03:53
Вопрос по jquery. Как запретить один из скриптов при клике vuler Общие вопросы Javascript 1 07.03.2012 22:35