javascript - XAMPP中出现奇怪的JavaScript

出于某种奇怪的原因，以下jfiddle在我的xampp中起作用：https://jsfiddle.net/mxba760w/显然，顶部和底部div不完整，因此不应存在；但是，当我删除它们时，代码无法正常工作。

HTML代码：

    <form action="" class="search-form">
            <div class="cell">
                <input type="text" name="q" onClick="action();"/>
            </div>
            <div class="cell button-holder">
                <button type="submit" id="dropdownbutton">
                    <span>Search</span>
                </button>
            </div>
        </form>

CSS：

.search-form {
display: table;
border: 5px solid red;
background: #fff;
margin: 0 auto 30px auto;
}

.search-form .cell {
display:table-cell;
vertical-align:middle;
}

.search-form input {
font-size: 1.3em;
height: 50px;
border: none;
}

.search-form button {
display:block;
border: none;
background-color: red;
height: 50px;
vertical-align: top;
cursor: pointer;
}

.button-holder {
background-color: red;
}

#dropdownbutton{
visibility: hidden;
}

的JavaScript

function action() {
        document.getElementById('dropdownbutton').style.visibility =     'visible';
    }

最佳答案

当浏览器在您的onclick="..."事件处理程序中执行代码时，它将寻找一个满足您事件要求的名为action的引用。

由于浏览器“寻找”潜在匹配的方式，它将以当前表单（由于这是一个表单元素），然后在全局窗口（函数所在的位置）中查找。

由于表单具有“动作”属性，因此它成为找到的第一个参考。不幸的是，尝试调用它会失败（因为它不是函数/方法）

我强烈建议不要命名任何与其他地方使用的非常通用名称相似的全局函数。在这种情况下，调用函数"someAction"或任何其他名称应该可以解决该问题。