按其值选择一个按钮，然后单击它

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？

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，您将获得所有按钮的列表。然后你可以循环它们和click()他们所有。

编辑 - 问题编辑后的新片段

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>

Answer 2

我不建议这样做，因为你的编码过多但正如你所提到的，下面是相同的方式。

$(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)" />

Answer 3

在这种情况下，以类似的方式使用JavaScripts qazxsw poi

querySelector

编辑

您可以将您的选择保存在变量中并将document.querySelector('input[type="button"][value="my task" i]') 附加到它。这可以按你的意愿工作。

注意eventListener -function，如果这将是表单的一部分，它会阻止默认发送操作，你应该手动触发发送表单。 event.preventDefault()-variable本身包含有关你的event事件的对象

click

Answer 4

你可以试试：

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)
})

请注意，querySelectorAll返回数组，以便获取元素，您应该使用索引来索引返回数组的第一个元素，然后单击：

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

并添加一个事件监听器你可以做：

  elements[0].click()

并且不要忘记将onclick属性添加到html中的button元素，以使用事件对象调用javascript代码中的等效函数