¿Cómo puedo seleccionar un botón en función de su valor y hacer clic en él (en Javascript)?

Ya lo encontré en JQuery:

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

Mi código HTML para el botón es:

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

¿Cuál es el equivalente en JS y cómo puedo hacer clic en él? (probablemente así: buttonSelected.click();).

¿Y cómo ejecuto el javascript del botón en el que hice clic?

1
user8834409 17 sep. 2018 a las 10:34

4 respuestas

La mejor respuesta

Utilice querySelector para seleccionarlo. Luego haga clic en ()

Su HTML tiene un botón y no un elemento de entrada, así que cambié el selector para que coincida con el 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>

De lo contrario, use este selector:

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

Tenga en cuenta que si tiene varios botones con el mismo valor, deberá usar querySelectorAll y obtendrá una lista de todos los botones. Luego puede recorrerlos y click() todos.

Editar: nuevo fragmento después de la edición de preguntas

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>
0
Oram 17 sep. 2018 a las 09:12

No se recomienda de esta manera debido a un exceso de codificación, pero como mencionó, a continuación se muestra la forma equivalente.

$(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)" />
0
Jitendra G2 17 sep. 2018 a las 08:12

Usar JavaScripts querySelector de manera similar funciona en este caso

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

EDITAR

Puede guardar su selección en variable y adjuntar eventListener. Esto funcionaría como lo desees.

Observe la función event.preventDefault(), si esto formara parte del formulario, por ejemplo, evitaría que la acción de envío predeterminada y se activara el envío del formulario manualmente. event - la variable en sí contiene un objeto sobre su click - evento

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)
})
0
Jimi Pajala 17 sep. 2018 a las 09:21

Puedes probar:

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

Tenga en cuenta que querySelectorAll devuelve la matriz, por lo que para obtener el elemento, debe usar la indexación para indexar el primer elemento de la matriz devuelta y luego hacer clic:

  elements[0].click()

Y para agregar un oyente de eventos que puede hacer:

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

Y no olvide agregar el atributo onclick a su elemento de botón en html para llamar a la función equivalente en su código javascript con objeto de evento

0
Mehrnaz.sa 17 sep. 2018 a las 09:35