如何使用 document.getElementbyID('').innerHTML 将函数中的文本链接到同一网页？答案

【问题标题】：How to link text from a function to the same webpage using document.getElementbyID('').innerHTML?如何使用 document.getElementbyID('').innerHTML 将函数中的文本链接到同一网页？
【发布时间】：2014-04-17 17:04:56
【问题描述】：

试图将此信息链接到“单击此处查看..”并使其显示在同一页面上

<script type="text/javascript">
  function rhinoinfo(){
    document.getElementByID('defArea').innerHTML="";
    "There are five different species of rhinoceros. The name rhinoceros means  
    ‘nose horn’ and is often shortened to rhino. It comes from the Greek words  
    rhino (nose) and ceros (horn).White rhinoceros are the second largest land  
    mammal. Rhinos can grow to over 6 feet tall and more than 11 feet in length.  
    Rhinoceros have thick, sensitive skin. Source: Savetherhino.org";
  }
</script>


<p>Click here to see information about the rhino.</p>
</div>
<div id="defArea">
  <p></p>
</div>
</body>
</html>

【问题讨论】：

请同时包含您的代码的演示小提琴。

标签： javascript html function hyperlink innerhtml

【解决方案1】：

您的代码存在一些问题。

您将 innerHTML 设置为空字符串，而不是下一行的字符串
您将document.getElementById 错误输入为document.getElementByID
当用户单击 p 标签时，您没有设置处理程序来调用您的代码

这是一个工作版本http://jsfiddle.net/mendesjuan/Ljf28/1/

// I added an ID to the p, so you can hookup the handler from JS
document.getElementById('clickme').addEventListener('click', function(){
    document.getElementById('defArea').innerHTML = "There are five different species of rhinoceros. The name rhinoceros means      ‘nose horn’ and is often shortened to rhino. It comes from the Greek words rhino (nose) and ceros (horn).White rhinoceros are the second largest land mammal. Rhinos can grow to over 6 feet tall and more than 11 feet in length. Rhinoceros have thick, sensitive skin. Source: Savetherhino.org";    
});

您将 innerHTML 设置为空字符串，而不是下一行的字符串。当然，你也得在用户点击p的时候调用rhinoinfo()。

还有，

【讨论】：

【解决方案2】：

缺少一些东西。 byID 这里是 byId。 'd' 应该很小，并且没有 onclick 事件。下面是代码

<html>
<script type="text/javascript">
function rhinoinfo(){
    document.getElementById('defArea').innerHTML = 
        "<P>There are five different species of rhinoceros. The name rhinoceros means  " +
        "'nose horn' and is often shortened to rhino. It comes from the Greek words " +
    "rhino (nose) and ceros (horn).White rhinoceros are the second largest land  " +
    "mammal. Rhinos can grow to over 6 feet tall and more than 11 feet in length.  " +
    "Rhinoceros have thick, sensitive skin. Source: Savetherhino.org</P>";
 }
</script>

<body>
<p onclick="javascript:rhinoinfo();">Click here to see information about the rhino.</p>
</div>
<div id="defArea">
</div>
</body>
</html>

【讨论】：

【解决方案3】：

因此，如果我理解正确，当您单击单击此处部分时，您希望该文本显示在页面的“defArea”部分中。

你很亲密。您只需要添加一个指向该页面的链接即可实现此目的。

<a href="#" onclick="functionName()">Click here</a>...

http://jsfiddle.net/NUqdZ/

编辑根据 cmets：

我更正但未提及的其他错误...

innerHTML 语法不正确。应该是：innerHTML="INSERT TEXT HERE"，两者之间没有分号。这将结束语句并且不会将文本插入到 div 中。
更新了 jsfiddle 以反映以下建议的更改
它的 document.getElementById 不是 getElementByID

【讨论】：

如果你要使用一个链接，它应该有一个真正的href，这样它就可以在 JS 被禁用时工作。您还应该返回 false 以便不更新 URL 片段。最后，你不应该向新手推荐内联处理程序，教他们更好的方法。还有其他你没有提到的错误。