javascript - 简单的 innerHTML 更新不起作用

Question

长话短说，我正在改进现有的注册表单以执行简单的“你是人类”检查。简单的东西（人们会认为）。我什至还没有找到好东西，因为我似乎无法span在页面上设置几个元素的 innerHTML。

这是精简的代码...

<form method="post" action="register2.php">Please verify that you are human below...
    <br/> <span id="num1"></span> X
    <input id="num2" style="width:20px" /> equals <span id="answer"></span>

    <br>
    <input id="submit" type="submit" value="Register" disabled="disabled" />
</form>

和精简的脚本...

$('#submit').attr("disabled", "disabled");

var num1 = Math.floor((Math.random() * 11));
var num2 = Math.floor((Math.random() * 11));
var answer = num1 * num2;

$('#num1').innerHTML = "" + num1;
$('#answer').innterHTML = "" + answer;

在这一点上......我只想看到最后两行设置正确的表单元素，以便我可以继续处理验证功能。我在这里一定有错字或逻辑错误......想法？

这是小提琴：http: //jsfiddle.net/2e9Xc/

Answer 1

.innerHTML是 DOM 元素的属性。

document.getElementById('num1').innerHTML = "" + num1;

html()是要使用的 jQuery 函数，而不是innerHTML：

$('#num1').html(num1);

Answer 2

采用：

$('#num1').html(num1);
$('#answer').html(answer);

由于您已经使用.html()最好的方法加载了 jQuery。

见：http ://api.jquery.com/html/

如果您坚持使用innerHTML，则需要从 jQuery 对象中获取正确的 DOM 对象，如下所示：

$('#num1')[0].innerHTML = "" + num1;
$('#answer')[0].innterHTML = "" + answer;

Answer 3

您不要InnerHTML在 JQuery 对象上使用。您改用该html()方法。像这样：

HTML

<form method="post" action="register2.php">Please verify that you are human below...
    <br/> <span id="num1"></span> X
    <input id="num2" style="width:20px" /> equals <span id="answer"></span>

    <br>
    <input id="submit" type="submit" value="Register" disabled="disabled" />
</form>

JavaScript

$('#submit').attr("disabled", "disabled");

var num1 = Math.floor((Math.random() * 11));
var num2 = Math.floor((Math.random() * 11));
var answer = num1 * num2;

$('#num1').html(num1);
$('#answer').html(answer);

JSFiddle

http://jsfiddle.net/2e9Xc/1/

Answer 4

只需使用

$('#num1').html("" + num1);

.html()是最好的选择。