Нажмите на кнопку класса или Span класс - PullRequest
Новая
       5

Нажмите на кнопку класса или Span класс

0 голосов
/ 15 февраля 2019

Я хочу смоделировать нажатие на кнопку вверх или вниз,

Я пытался с этим: document.querySelector('button.up')[4].click();

на странице есть несколько полей ввода с кнопками вверх и вниз,Я хотел бы кнопку вверх по полю с идентификатором "sl" или кнопку nth вверх?код: 

<div class="input-text num" >
<input type="text" placeholder="" id="sl" min="0" max="" step="0.00001">
<button tabindex="-1" class="up">
<span class="v"></span></button><
button tabindex="-1" class="down">
<span class="v"></span></button></div>

1 Ответ

0 голосов
/ 15 февраля 2019

Первое, что может вызвать проблему, - это строка: 

document.querySelector('button.up')[4].click();

Причины, по которым возникает проблема, состоят в том, что document.querySelector() возвращает либо первый элемент, соответствующий предоставленному селектору, либо null,если нет элементов, соответствующих селектору.Следовательно, индексная нотация [4] обречена на провал в дизайне.

Не видя больше вашего HTML, трудно предложить полностью работающее предложение, но я бы посоветовал, что использование альтернативного селектора должно работать (так долгопоскольку ваши id атрибуты уникальны, так как они должны соответствовать спецификации): 

document.querySelector('#sl + button.up').click();


const clickHandler = (event) => {
  console.log(`${event.target.outerHTML}`);
}

document.querySelectorAll('button').forEach(
  (button) => button.addEventListener('click', clickHandler)
);

document.querySelector('#sl + button.up').click();
<div class="input-text num">
  <input type="text" placeholder="" id="sl" min="0" max="" step="0.00001">
  <button tabindex="-1" class="up">
<span class="v">up</span></button>
  <button tabindex="-1" class="down">
    <span class="v">down</span></button>
</div>

Ссылки:

...