javascript - 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" 或任何其他名称应该可以解决问题。