【问题标题】:innerHTML basicsinnerHTML 基础知识
【发布时间】:2011-02-14 12:27:46
【问题描述】:

我正在学习 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

【问题讨论】:

  • “立即”是什么意思?你的意思是重新加载页面后?
  • 当我点击链接时,在 FF 我看到一个随机数出现一瞬间

标签: javascript innerhtml


【解决方案1】:

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

尝试将代码更改为:

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

超链接不需要设置,因为你不希望它点击时重定向,所以设置为#

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

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

return false 将在函数运行后停止任何重定向或跳转(# href 默认位于页面顶部,如果页面较长,则很烦人)。

【讨论】:

  • 谢谢大家! 'javascript.html' 是实际页面的名称。所以我应该按照 Tom 的建议使用 href="#",或者按照 Shadow Wizard 的建议通过添加 return false 来修改我的 onclick
  • 或两者兼而有之!删除 .html 页面链接使代码目的更有意义、简洁和干净。 return false 将防止点击时任何不自然的页面跳转。
  • 啊,我明白了!感谢您指出。在本地 PC 上测试时,跳跃似乎没有发生,但我想它托管在服务器上时会发生
  • 如果你的页面很长,它会跳转,并且有垂直滚动条。大多数浏览器会将其跳转到页面顶部,这可能很烦人。这些行为不需要在 Web 服务器上进行复制。
  • @Baba:最正确的想法是根本不使用链接(因为您没有链接到任何东西)而是使用&lt;button&gt;
【解决方案2】:

它消失了,因为文档被重定向到链接href。它与 innerHTML 无关。

为了防止它,像这样添加return false

onclick="getNbr(); return false;"

【讨论】:

    【解决方案3】:

    您的链接将您重定向到“javascript.html”。因此,由于新页面加载,您的调用结果会丢失

    【讨论】:

      【解决方案4】:

      问题出在这里:

      <p><a href="javascript.html" onclick="getNbr()">get a number</a></p>
      

      当您单击此锚点时,您将被重定向到 javascript.html 页面。您可以使用以下方法:

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

      【讨论】: