Javascript нажать кнопку

Question

Ниже у меня есть HTML код

<td valign="top" id="UserManagebutton1"><input type="button" value="Add" class="inputbutton"> 
    <input type="button" value="Delete" class="inputbutton"> 
    <input type="button" value="Import" class="inputbutton"> 
    <input type="button" value="Export" class="inputbutton"> 
    <input type="button" value="Change Status" class="inputbutton"> 
    <input type="button" value="Purge AD Users" class="inputbutton"></td> 

Я попытался положить это в моей консоли, но это не сработало. Я пытаюсь нажать кнопку «Добавить».

Ниже приведен код, который я использовал.

document.getElementById('Add').click();

Любая идея, почему ее не работает? Он работает с другими.

Answer 1

так как кажется, что вы не имеете контроля над страницей, которую вы пытаетесь манипулировать, вам придется работать с HTML, как это. В этом случае, если у вас есть контроль над используемым вами браузером (делаете ли вы это с консоли?), Вы можете использовать document.querySelector: Documentation here.

Таким образом, в вашем конкретном случае, вы хотите сделать

document.querySelector('[value="Add"]').click() 

Или, чтобы сделать вещи более конкретные, вы могли бы сделать

document.querySelector('#UserManagebutton1 input[value="Add"]').click() 

Вот скрипка с примером: http://jsfiddle.net/xonev/V6SQ2/

Answer 2

Если вы не используете библиотеки JS, попробуйте:

document.getElementsByName('Add')[0].click()

ОБНОВЛЕНО - коррекция ниже

Поскольку кнопки не имеют name атрибуты (благодаря @Rocket HAZMAT) и так как вы не можете изменить HTML, вы можете попробовать это вместо:

document.getElementsByTagName('input')[0].click();

// [0] для кнопки добавления,
// [1] для стирания кнопки
// и т.д.

Answer 3

Использование

<input type="button" id="Add" value="Add" class="inputbutton"> 
document.getElementById('Add').click(); 

Примечание вам нужно id="Add" для того, чтобы получить его используя getElementById('Add')

Answer 4

У вас нет уникальных идентификаторов для ваших кнопок. Сделайте идентификатор таким же, как значение.

<td valign="top" id="UserManagebutton1"> 
    <input type="button" id="Add" value="Add" class="inputbutton"> 
    <input type="button" id="Delete" value="Delete" class="inputbutton"> 
    <input type="button" id="Import" value="Import" class="inputbutton"> 
    <input type="button" id="Export" value="Export" class="inputbutton"> 
    <input type="button" id="Change" value="Change Status" class="inputbutton"> 
    <input type="button" id="Purge" value="Purge AD Users" class="inputbutton"> 
</td> 

Используйте это, тогда ваш код будет работать.

Answer 5

В вашем коде вы установили значение кнопки Add, что означает, что текст, который будет отображаться на кнопке, равен Add. Значение, поскольку атрибут устанавливает текст этого элемента.

Если вы хотите получить доступ к этому элементу с идентификатором, необходимо указать атрибут id для него, как это:

<input id="Add" class="inputbutton" type="button" value="Add"> 

А для доступа к кнопке можно просто использовать код, который вы использовали в ваше сообщение:

document.getElementById('Add').click(); 

Кроме того, если вы не хотите, чтобы изменить текущий код, вы могли бы просто использовать другой Javascript селектор, чтобы получить этот конкретный элемент, такой как:

document.getElementsByClassName('inputbutton')[0].click(); 

Кроме того, если вы хотите добавить обработчик событий нажмите для других элементов, как вы делаете для кнопки Add, вы могли бы сделать некоторые Event Delegation который отлично подходит для управления производительностью:

// Bind the event listener to the top most element that contains your event targets 
document.addEventListener('click', function(event){ 
    // Get target of the event 
    var target = event.target || event.srcElement; 

    switch(target.value) { 
     case('Add'): 
     alert('Add button clicked!'); 
     break; 
     ... 
     // Add cases for the other buttons as well 
    } 
}); 

Вот простой вариант, который прослушивает только за клики по кнопке Add:

document.addEventListener('click', function(event){ 
    var target = event.target || event.srcElement; 

    if (target.value == 'Add') { 
     alert('You clicked?'); 
    } 
});