Question

当我单击表单中的“提交”按钮时，我试图使表格出现。我正在为该功能使用JavaScript。参见下面的代码：

<script type="text/javascript">
    function showTable1234() {
        var showtab = document.getElementsByClassName('container12');
        for(var i =0;i !=showtab.length;i++)
            showtab[i].style.display = 'block';
    }
</script>

这是调用上述函数的按钮的代码：

<button type="submit" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

这是div元素，将在单击提交按钮时显示：

<div class="container12" >
    <h2>Hover Rows</h2>           
    <table class="table table-hover" id = "tab12">
        <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                .....

现在，只要我在Chrome浏览器上运行代码并单击“提交”按钮，表格就仅可见，但仅需一秒钟之久，然后消失。当我单击“提交”按钮时，它再次出现，但是再次显示相同的时间。

我什至尝试使用此代码但结果相同

<script type="text/javascript">
    function showTable1234() {
        var showtab = document.getElementsByClassName('container12')[0];
        for(var i =0;i !=showtab.length;i++)
            showtab[i].style.display = 'block';
    }
</script>

但是为此，我遇到了这个错误

Uncaught TypeError: Cannot read property 'style' of undefined
    at showTable1234

高级谢谢您的帮助。

Answer 1

我怀疑您的提交按钮处于表单中，并且正在导致表单提交。因此JavaScript可以正常工作，但是由于表单提交，整个页面都得到了刷新。

要停止提交表单，可以将onSubmit=“return false”添加到表单。您还可以通过从按钮的onClick返回false来停止提交，或者使用类型为button而不是submit的按钮。

Answer 2

更改此行：

<button type="submit" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

对此，您的问题应得到解决：

<button type="button" class="btn btn-primary btn-block" onclick="showTable1234()">Submit</button>

Answer 3

在函数末尾添加return false并在按钮的单击处理程序中返回返回值showTable1234，以防止执行默认操作（提交表单并刷新页面）。 / p>

<button type="submit" class="btn btn-primary btn-block" onclick="return showTable1234();">Submit</button>
<script>
function showTable1234() {
   var showtab = document.getElementsByClassName('container12');
   for(var i =0;i !=showtab.length;i++)
   showtab[i].style.display = 'block';
   return false;
}
</script>

Div元素仅出现几秒钟

3 个答案: