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

在xampp中出现奇怪的javascript

1 个答案: