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

使用

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

请注意，您需要id="Add"才能使用getElementById('Add')

Answer 2

由于您似乎无法控制要尝试操作的页面，因此您必须按原样使用HTML。在这种情况下，如果您确实可以控制正在使用的浏览器（您是从控制台执行此操作吗？），则可以使用document.querySelector：Documentation here。

因此，在您的具体情况下，您想要

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

或者，为了使事情更具体，你可以做到

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

这是一个例子的小提琴：http://jsfiddle.net/xonev/V6SQ2/

Answer 3

您的按钮没有唯一标识符。创建一个与值相同的ID。

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

在您的代码中，您已将按钮的值设置为Add，这意味着按钮上显示的文字为Add。值，作为属性设置该元素的文本。

如果您想按ID访问该元素，则需要为其指定id属性，如下所示：

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

要访问该按钮，您只需使用您在帖子中使用的代码：

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

此外，如果您不想修改当前代码，可以使用其他javascript选择器来获取该特定元素，例如：

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

此外，如果您想为其他元素添加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?');
    }
});

Answer 5

如果您没有使用任何JS库，请尝试：

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

更新 - 更正

由于按钮没有name属性（感谢@Rocket Hazmat），并且由于您无法更改HTML，因此您可以尝试使用：

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

// [0]添加按钮，
// [1]表示删除按钮，
//等。

单击按钮的Javascript

5 个答案: