i'm trying to write a simple anti bot random math quiz to prevent some bot registration into my website, i need only help with an eventlistener, to clarify:
i want that when a human write the correct answer, automatically the button for signup is showed (without submission button) (onkeyup? onkeydown?) i can't find the right solution.
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>You may use an onchange listener to the input element. So whenever the value of the input element changes, the fire function will be triggered.
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>