Estoy tratando de escribir un simple cuestionario aleatorio de matemáticas anti bot para evitar el registro de algún bot en mi sitio web, solo necesito ayuda con un detector de eventos, para aclarar:
Quiero que cuando un humano escriba la respuesta correcta, se muestre automáticamente el botón de registro (sin el botón de envío) (¿onkeyup? ¿onkeydown?) No puedo encontrar la solución correcta.
jsfiddle: https://jsfiddle.net/uxrv5zch/
var minimum = 1; var maximum = 10; var int1 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; var int2 = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum; document.getElementById('question').innerHTML = int1 + " " + "+" + " " + int2; var qanswer = int1 + int2; let hideSignup = document.getElementsByClassName('Button Button--primary Button--block')[0].style.visibility = 'hidden'; function fire() { var uanswer = document.getElementById('answer').value; if (uanswer === qanswer) { hideSignup = document.getElementsByClassName('Button Button--primary Button--block')[0].style.visibility = ''; } else { alert("WRONG! Don't snooze during math class!") } } <div class="Modal-body"> <div class="LogInButtons"></div> <div class="Form Form--centered"> <div class="Form-group"><input class="FormControl" name="username" type="text" placeholder="Username"></div> <div class="Form-group"><input class="FormControl" name="email" type="email" placeholder="Email"></div> <div class="Form-group"><input class="FormControl" name="password" type="password" placeholder="Password"></div> <div class="quizcontainer"> <h3>Random Math Quiz</h3> <h4 id="question">1 + 1</h4><input class="FormControl" type="text" name="answer" id="answer"></div> <div class="Form-group"><button class="Button Button--primary Button--block" type="submit" style="visibility: hidden;"><span class="Button-label">Sign Up</span></button></div> </div> </div>Puede usar un oyente onchange para el elemento de entrada. Entonces, cada vez que cambie el valor del elemento de entrada, se activará la función de disparo.
const answer = document.getElementById('answer'); answer.addEventListener('change', fire); function fire(e) { var uanswer = e.target.value; if (uanswer == qanswer) { hideSignup = document.getElementsByClassName('Button Button--primary Button--block')[0].style.visibility = ''; } else { alert("WRONG! Don't snooze during math class!") } } <div class="quizcontainer"> <h3>Random Math Quiz</h3> <h4 id="question"></h4> <input className="FormControl" type="text" name="answer" id="answer" /> </div>