How can I select a button based on its value and click on it (in Javascript)?

I already found it in JQuery:

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

My HTML Code for the Button is :

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

What is the equivalent in JS and how may i click on it (probably like this: buttonSelected.click(); ) .

And how do i run the javascript of the button clicked ?

How can I select a button based on its value and click on it (in Javascript)?

I already found it in JQuery:

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

My HTML Code for the Button is :

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

What is the equivalent in JS and how may i click on it (probably like this: buttonSelected.click(); ) .

And how do i run the javascript of the button clicked ?

• javascript
• jquery
• dom

• jQuery has a method that clicks for you which you already used. Doesn't that work? buttonSelected.click() – Ertan Kara Commented Sep 17, 2018 at 7:41
• use querySelector to select it. – Oram Commented Sep 17, 2018 at 7:42

4 Answers 4

Use querySelector to select it. Then click()

Your HTML has a button and not an input element so I changed the selector to match the 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>

Otherwise, use this selector:

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

Note that if you have multiple buttons with the same value you'll need to use querySelectorAll and you'll get a list of all the buttons. Then you can loop over them and click() them all.

Edit - new snippet after question edit

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

<script src="https://ajax.googleapis./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>

you can try:

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

note that querySelectorAll returns array so to get the element you should use indexing to index the first element of the returned array and then to click:

  elements[0].click()

and to add a event listener u can do:

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

and don't forget to add onclick attribute to your button element in html to call the equivalent function in your javascript code with event object

I am not remended this way because of excess your coding but as you mentioned, below are the equivalent way.

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

Using JavaScripts querySelector in similiar manner works in this case

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

EDIT

You might save your selection in variable and attach eventListener to it. This would work as you desire.

Notice event.preventDefault() -function, if this would be part of form it would example prevent default from send action and you should trigger sending form manually. event-variable itselfs contains object about your click-event

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