单击按钮时如何将style.display从无更改为嵌入式？

Question

I want to display id="text" when the button is clicked. So I tried this:

    <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>

But this does not work as expected and text is not displayed. What am I doing wrong? http://jsfiddle.net/dPhUQ/

Answer 1

It is shown, but you are submitting the page. Change your input to type='button' instead of 'submit'

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

Answer 2

You are not cancelling the click event for the submit button so the page will submit the form.

onclick = "showText(); return false;"

You should really look at adding the events 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

The problem is the way you've got jsfiddle set up. On the left is a pull-down to choose how the site incorporates your JavaScript into the result page. Set it to "no wrap (head)" and it'll work. Well, it won't work, actually, but it'll call your function.

The next problem you'll have is that your "submit" button will submit the form immediately after your handler runs. To prevent that, you'll need to stop event propagation.

Answer 4

看起来您的FORM正在干扰您想要的结果，请尝试以下操作：

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