如何在 "image" 类型的输入上调用 onclick 函数？

Question

所以，在我的代码中，我有 "Image".

类型的输入

<div class="icon" id="button_dictionary">
    <form>
        <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> 
        <label for="inputDictionary">Dictionary</label>
    </form>
</div>

我想要的是，当用户点击它时，会出现以下表格：

<form action="http://www.google.pt/search" id="form-dictionary">
     (...)
</form>

我创建了一个 Javascript 函数来实现它：

function showsDictionaryForm(){
            if(document.querySelector('#form-dictionary').style.display == "none")
                document.querySelector('#form-dictionary').style.display = "inline-block";
            else
                document.querySelector('#form-dictionary').style.display = "none";
}

问题是当我尝试处理 onClick 事件时，当它发生时，会调用上面的函数。该函数运行良好，因为对于 "submit" 输入类型，它可以运行。

无效的解决方案：

我试过这样的事情：

document.querySelector('#button_dictionary').onclick = showsDictionaryForm;

还有这个，在函数的末尾添加 return false。

 <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary" onClick="showsDictionaryForm()">

None 其中效果很好。形式出现，但消失得一样快。在我看来，表单是计算出来的，但是当提交按钮时，页面重新加载os类似的东西，它又消失了。

Answer 1

在您的 showsDictionaryForm(event) 事件处理程序中使用 event.preventDefault() 来阻止默认行为的发生（在您的情况下，表单正在提交给服务器）。

在 showsDictionaryForm 上，我建议使用 class 操作而不是内联样式。例如，您可以全局定义：

.hidden {
  display: none !important;
}

并将其用于 show/hide form-dictionary 表格。

如何在 "image" 类型的输入上调用 onclick 函数？

How to call an onclick function on an input of type "image"?

javascript

html

css

image

html-input