<div>
<label id="1" style="display:inline-block" ></label><span class="tab"></span><i class="fa fa-plus" style="font-size:24px"></i><span class="tab"></span><label id="2" style="display:inline-block"></label><span class="tab"></span><i class="fas fa-equals" style="font-size:24px"></i><span class="tab"></span><input type="text" id="answer" name="answer" style="display:inline-block; width:70px">
</div>
<style>
.tab {
display: inline-block;
margin-left: 4em;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
var rndInt1 = Math.floor(Math.random() * 10) + 1;
var rndInt2 = Math.floor(Math.random() * 10) + 1;
document.getElementById("1").innerHTML = rndInt1;
document.getElementById("2").innerHTML = rndInt2;
</script>
<script>
const elem = document.querySelectorAll(".wpcf7-submit")
elem.forEach(el => el.addEventListener('click', event => {
var inp1 = document.getElementById("1").innerHTML;
var inp2 = document.getElementById("2").innerHTML;
var answer = document.getElementById("answer").value;
if(answer == parseInt(inp1)+parseInt(inp2)){
console.log("ok")
}
else{
alert("your answer number is incorrect!")
document.getElementById("answer").value = "";
var rndInt1 = Math.floor(Math.random() * 10) + 1;
var rndInt2 = Math.floor(Math.random() * 10) + 1;
document.getElementById("1").innerHTML = rndInt1;
document.getElementById("2").innerHTML = rndInt2;
event.preventDefault();
}
}))
</script>
