javascript - innerHTML 基础知识

Question

我正在学习 javascript，我想尝试使用 innerHTML。我看到随机数短暂出现，但它没有“粘住”，即它立即消失。

<script language="javascript" type="text/javascript">
function getNbr(){
var n = Math.floor(Math.random() * 10) ;
document.getElementById("nbr").innerHTML = n ;
}

HTML:

<td id="nbr" width="75%">&nbsp;</td> ...
<p><a href="javascript.html" onclick="getNbr()">get a number</a></p>

看看下面的教程，它似乎非常简单，所以我很惊讶它对我不起作用

http://www.tizag.com/javascriptT/javascript-innerHTML.php

Answer 1

超链接正在重定向。这会导致设置 innerHTML，然后将页面重新加载回其原始状态。如果您在本地计算机上进行开发，这会非常快，您可能会断定这是 Javascript。 (将其上传到网络服务器，您应该会看到重新加载的页面更加清晰)。

尝试将代码更改为:

<p><a href="#" onclick="getNbr();return false;">get a number</a></p>

超链接不需要设置，因为你不想让它在你点击的时候跳转，所以设置为#。

onclick中的分号(;)分隔要调用的代码。所以你可以有一个大的函数调用列表，例如:

"getNbr();anotherFunc();yetAnother();return false;"

函数运行后返回 false 将停止任何重定向或跳转(# href 默认位于页面顶部，如果您的页面很长，这会很烦人)。