如何通过html id将两个随机数传递给JS中的一个函数

How to pass two random numbers by their html id to a function in JS?

本文关键字：函数 JS 一个 两个 id html 何通过 随机数      更新时间：2023-09-26

我正在尝试用javascript实现一个数学captcha。我用创建了随机数

<script>
setInterval(function() {
  $('#num1').text(Math.floor(Math.random()*4)+1);
  $('#num2').text(Math.floor(Math.random()*3)+1);
}); 
</script>

然后把它们放在这样的表格中：

<div>
<span id="num1"></span> +
<span id="num2"></span> =
<input id="captcha" type="text" />
</div>

然后验证：

$.validator.addMethod('captcha',
function(value) {
$result = ( parseInt($('#num1').val()) + parseInt($('#num2').val()) == parseInt($('#captcha').val()) ) ;
return $result;
},
'Numbers do not match, please try again.'
);

但有两个问题：一是随机数有时产生，有时不产生。第二个问题是验证。我想对生成的两个数字求和，看看求和的数字是否等于输入数字，然后返回true，但不知怎么的，document.getElementById（'num1'）.value没有传递生成的数字。知道怎么解决这个问题吗？

更新：

var number1 = Math.floor(Math.random()*4)+1;
var number2 = Math.floor(Math.random()*3)+1;
$('#num1').text(number1);
$('#num2').text(number2);
$.validator.addMethod('captcha',
function(value) {
$result = $('#num1').text(number1).val() + $('#num2').text(number2).val() == parseInt($('#captcha').val()) ;
return $result;
},
'Numbers do not match, please try again.'
);

value属性不会为span这样的元素返回文本，请使用innerHTML document.getElementById("num1").innerHTML，或者，如果使用jQuery $('#num1').text()。但这种captcha很容易被破坏，因为关于答案的数据在客户端，你应该使用后端来验证输入数据。

我们在评论中解决了这个问题，但以防其他人读到这篇文章。

如果你已经将数字存储到变量中，只需将变量相加，就不用担心跨度的值

var number1 = Math.floor(Math.random()*4)+1;
var number2 = Math.floor(Math.random()*3)+1;
$('#num1').text(number1);
$('#num2').text(number2);
$.validator.addMethod('captcha',
function(value) {
    $result = number1 + number2 == parseInt($('#captcha').val()) ;
    return $result;
}, 'Numbers do not match, please try again.');
相关文章：