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

在这种情况下，可以类似地使用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)
})

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代码中的等效函数

Answer 3

使用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 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)" />

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

4 个答案:

编辑-问题编辑后的新代码段