按照其值选择一个按钮并点击它。

Question

如何基于其值选择并单击按钮（使用Javascript）？

我已经在JQuery中找到了它：

$('input [type = button] [value = my task]');

我的按钮的 HTML 代码是：

<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
    <div class="button-background">
        <div class="buttonStart">
            <div class="buttonEnd">
                <div class="buttonMiddle"></div>
            </div>
        </div>
    </div>
    <div class="button-content">Lancer le pillage</div>
</div>

<script type="text/javascript" id="button5b9f66b97cf47_script">
    jQuery(function() {
        jQuery('button#button5b9f66b97cf47').click(function () {
            jQuery(window).trigger('buttonClicked', [this, {"type":"submit","value":"My Task","name":"","id":"button5b9f66b97cf47","class":"green ","title":"","confirm":"","onclick":""}]);
        });
    });
</script>

JS中的等价操作是什么，怎样点击它（可能像这样：buttonSelected.click();）。

如何运行所点击按钮的javascript代码？

- user8834409

---

jQuery有一个可以为您点击的方法，您已经使用过了。那不起作用吗？buttonSelected.click() - Ertan Kara

使用querySelector来选择它。 - Oram

Answer 1

使用querySelector选择它。然后点击()

您的HTML中有一个按钮而不是输入元素，因此我更改了选择器以匹配HTML。

let button = document.querySelector('button[value="my task"]');
button.click();

<button type="submit" value="my task" id="button5b9f54e9ec4ad" class="green " onclick="alert('clicked')">
    <div class="button-container addHoverClick">
        <div class="button-background">
            <div class="buttonStart">
                <div class="buttonEnd">
                    <div class="buttonMiddle"></div>
                </div>
            </div>
        </div>
        <div class="button-content">Launch</div>
    </div>
</button>

否则，请使用此选择器：

document.querySelector('input[type="button"][value="my task"]')

请注意，如果您有多个具有相同值的按钮，则需要使用 querySelectorAll，然后您将获得所有按钮的列表。然后，您可以循环遍历它们并单击它们所有。

编辑 - 在问题编辑后添加新片段

jQuery(function() {
  jQuery('button#button5b9f66b97cf47').click(function() {alert('success')});
  document.querySelector('button[value="My Task"]').click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="submit" value="My Task" id="button5b9f66b97cf47" class="green ">
<div class="button-container addHoverClick">
    <div class="button-background">
        <div class="buttonStart">
            <div class="buttonEnd">
                <div class="buttonMiddle"></div>
            </div>
        </div>
    </div>
    <div class="button-content">Lancer le pillage</div>
</div>

- Oram

---

嗨，谢谢你。我更新了我的帖子，请问为什么当我点击按钮时它不运行按钮的JavaScript？我该如何做才能让它工作？ - user8834409

据我所知，您正在尝试在窗口对象上触发自定义事件"buttonClicked"。但是，如果没有该自定义事件的处理程序，那么什么都不会发生。您能解释一下您究竟想做什么吗？ - Oram

我正在为一个网站构建扩展程序，希望我的扩展程序能够点击值为“我的任务”的按钮，然后运行该按钮的JavaScript代码（即网站上的JavaScript代码）。 - user8834409

如果按钮的点击事件有事件处理程序，它将执行该程序。您在示例中使用的单击事件是这样的：function () { jQuery(window).trigger('buttonClicked', [this,{...}]); }); 它触发了自定义事件'buttonClicked'和所有参数。可以先尝试绑定一些简单的东西，比如 alert('test')，并查看当您触发单击时代码是否运行？ - Oram

按钮选择似乎不起作用（显示为NULL），当我执行以下操作时：alert(document.querySelector('input[type="button"][value="my task"]')); - user8834409

Answer 2

你可以尝试：

  var elements = document.querySelectorAll("input[type = button][value=something]");

注意querySelectorAll返回数组，所以要使用索引来获取元素，然后点击第一个返回的数组元素：

  elements[0].click()

并且，要添加一个事件监听器，您可以这样做：

  elements[0].addEventListener('click', function(event){
     event.preventDefault()
      //do anything after button is clicked
  })

不要忘记在HTML的按钮元素上添加onclick属性，以便使用事件对象调用相应的JavaScript函数。

- Mehrnaz.sa

---

你好，谢谢。我更新了我的帖子，请问为什么当我点击按钮时它不运行按钮的JavaScript？我该如何做才能让它正常工作？ - user8834409

我已经为您更新了答案，请告诉我它是否有效。 - Mehrnaz.sa

Answer 3

在这种情况下，使用JavaScript的querySelector以类似的方式工作

document.querySelector('input[type="button"][value="my task" i]')

编辑

你可以将选择保存在变量中，并为其附加eventListener。这样可以按照你的要求工作。

请注意event.preventDefault()函数，如果它是表单的一部分，它将防止默认发送操作，你应该手动触发发送表单。 event变量本身包含有关click事件的对象。

var button = document.querySelector('input[type="button"][value="my task" i]')

button.addEventListener('click', function(event){
  event.preventDefault() // Example if you want to prevent button default behaviour
  // RUN YOUR CODE =>
  console.log(123)
})

- Jimi Pajala

---

按钮选择似乎不起作用。我尝试了 alert(button);，它显示“NULL”，这正常吗？ - user8834409

抱歉，我在选择器的 [value="my task"] 属性中打错了一个字母。请再试一次。 - Jimi Pajala

@DorianGrn 看起来在你的示例中，你写了"My Task"，所以很可能是因为大小写敏感。只需更改值以匹配你的元素即可。这里有一个虚拟的CodeSandbox示例 https://codesandbox.io/s/4j97865pp9 - Jimi Pajala

我试过了，但它也不起作用。我真的不明白。 - user8834409

你有在 CodeSandbox 上检查示例代码吗？你可以使用 [value="my task" i] 实现不区分大小写的 CSS 选择。 - Jimi Pajala

Answer 4

我不建议这种方式，因为它会增加你的编码量，但正如你所提到的，以下是等效的方法。

$(document).ready(function() {
  var selectedbuttonValue = "2"; //change value here to find that button

  var buttonList = document.getElementsByClassName("btn")
  for (i = 0; i < buttonList.length; i++) {
    var currentButtonValue = buttonList[i];
    if (selectedbuttonValue == currentButtonValue.value) {
      currentButtonValue.click();
    }
  }

});

function callMe(valuee) {
  alert(valuee);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<input type="button" class="btn" value="1" onclick="callMe(1)" />
<input type="button" class="btn" value="2" onclick="callMe(2)" />
<input type="button" class="btn" value="3" onclick="callMe(3)" />

- Jitendra G2