En mi proyecto, quiero verificar si los botones se presionan en la secuencia correcta o no. La secuencia correcta se almacena en una matriz. Para eso, agregué un detector de eventos usando un bucle for y creé una función separada para el detector de eventos. Pero la función no se ejecuta mientras se ejecuta el bucle, solo emite una alerta sin hacer clic en el botón. Aquí está el código:
var points = [1,2,3,4,5]; for(var j=0;j<points.length;j++) { checkButton(j); } function checkButton(j) { $("button").on("click", function(){ if($(this).text()== points[j] ) { alert("compleated step "+(j+1)); } else { alert("incorrect step "+(j+1)); } }); }Gracias por tu tiempo !!
Debido a su bucle for, está registrando el mismo controlador de eventos varias veces. Todo lo que necesita hacer es registrar el controlador de clics una vez y ajustar la lógica de verificar si los botones se presionan en el orden correcto.
Debería considerar usar el atributo de valor para asignar un valor a cada botón, ya que esto le permite desvincular el valor del texto.
HTML
<div> <p>Click buttons in correct sequence!</p> <button value="1">#1</button> <button value="2">#2</button> <button value="3">#3</button> <button value="4">#4</button> <button value="5">#5</button> </div>JS
var order = [2,4,1,3,5] var nextOrderIndex = 0; // register handler once $("button").on("click", function() { // parse text of button to int for correct comparison var buttonValue = parseInt($(this).attr("value")) if (buttonValue == order[nextOrderIndex]) { // count up for next check // use modulo to start back at 0 when counter reaches order.length nextOrderIndex = (nextOrderIndex + 1) % order.length; alert("Correct"); } else { alert("Incorrect"); } });Ver violín en funcionamiento
Editar: ajustado para orden aleatorio