如何生成带有按钮/可点击区域的文本？答案

【问题标题】：How do I generate text with a button/clickable area?如何生成带有按钮/可点击区域的文本？
【发布时间】：2013-12-04 16:39:44
【问题描述】：

我试图创建可点击的文本（并最终）创建一个可以在定义区域中生成文本的自创按钮。当我点击“这将生成文本”时，它会在那里闪烁一秒钟然后消失。

注意：最后会有多个按钮在同一个区域生成文本，所以我需要替换文本。

CSS

#wrapper {
    margin: 0px;
    height: 500px;
    width: 500px;
}
a:hover{
    color: #0FC;
}
#button {
    height: 100px;
    width: 100px;
    float:left
}
#text{
    margin: 0px;
    height: 495px;
    width: 395px;
    float:left;
    border-style:solid;
    border-width:thin;
}

Javascript

   <script>
    function myFunction()
    {
    document.getElementById("text").innerHTML="My First JavaScript Function";
    }
   </script>
   </head>

HTML

<body>
   <div id="wrapper">
   <div id="button">   
<p><a href="">
<span onclick="myFunction()">This will generate the text</span>
</a></p>
   </div> 
   <div id="text"></div>
   </div>
   </body>

【问题讨论】：

你为什么不用 jquery 试试这个呢？这需要更容易。

标签： javascript html button text

【解决方案1】：

问题是你的<a> 标签没有链接到任何东西。当您单击它时，它将尝试通过那个“空”链接。您可以通过简单地将<a href="#">... 来修复它，或者将<a> 全部删除并使用css 设置<p> 的样式，使其看起来像您想要的那样可点击。

方法一：http://jsfiddle.net/eshellborn/VXD4K/

方法二：http://jsfiddle.net/eshellborn/VXD4K/2/

【讨论】：

【解决方案2】：

由于您的 <a> 标记为空，当您单击它时，它会重新定位页面。请尝试以下操作：

<p><a href="#"><span onclick="myFunction()">This will generate the text</span>
</a></p>

Demo

【讨论】：

【解决方案3】：

如果你想让文本出现，你可以像这样使用<div> 标签：

<div id="textgen" style="display: none">Your Text Here</div>
<button id="button" onclick="genText()">Your button text</button>
<script>
 function genText() {
  document.getElementById("textgen").style.display = 'block';
}
</script>

您还可以选择使用this JSFiddle HTML 代码，使其使用起来更加复杂和有趣。

【讨论】：