xampp中出现奇怪的javascript

Question

由于某种奇怪的原因，下面的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';
    }

Answer 1

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

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

因为表单有一个"action“属性，所以它成为第一个找到的引用。不幸的是，尝试调用它将失败(因为它不是一个函数/方法)

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