Select a button by its value and click on it

Question

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 :

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 ?

user_9839191 · Answer

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();

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

user_10307441 · Answer

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

user_6478277 · Answer

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

user_2036828 · Answer

I am not recommended 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);
}

Select a button by its value and click on it

4 Answers

Edit - new snippet after question edit