Question

我想在点击按钮时显示id="text"。所以我尝试了这个：

    <form name="i_choose_form" action="" method="post">
      <input type="submit" class="button" value="I am not sure, show me other choices..." onclick = "showText()"></br>
    </form>

    <span id ="text" style="display:none">First make your choice then you can see all other choices</span>

    <script type = "text/javascript">

function showText() { document.getElementById("text").style.display="inline"; }

</script>

但是这不能按预期工作，也不会显示文本。我究竟做错了什么？ http://jsfiddle.net/dPhUQ/

Answer 1

显示，但您正在提交页面。将您的输入更改为type ='button'而不是'submit'

<input type="button" class="button" value="I am not sure, show me other choices..." onclick = "showText()"></br>

Answer 2

您没有取消提交按钮的点击事件，因此页面将提交表单。

onclick = "showText(); return false;"

您应该真正考虑添加事件unobtrusively。

<input type="submit" id="showMore" class="button" value="I am not sure, show me other choices..." onclick = "showText()">
<script type="text/javascript">
    function showText() { 
        document.getElementById("text").style.display="inline";
    }
    document.getElementById("showMore").click = showText;
</script>

Answer 3

问题在于你设置jsfiddle的方式。左侧是一个下拉菜单，用于选择网站如何将JavaScript合并到结果页面中。将它设置为“无包裹（头部）”，它将工作。好吧，实际上它不起作用，但它会调用你的功能。

您将遇到的下一个问题是，您的“提交”按钮将在处理程序运行后立即提交表单。为了防止这种情况，您需要停止事件传播。

Answer 4

看起来你的FORM会干扰你想要的结果，请尝试这样做：

<div onclick = "showText()">Click me</div>

单击按钮时，如何将style.display从none更改为inline？

4 个答案: