如何在“圖像”類型的輸入上調用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事件時，以便在發生這種情況時調用上面的函數。 該功能運行良好，因為對於“提交”輸入類型，它可以正常工作。

無效的解決方案：

我嘗試過這樣的事情：

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

而且，在函數的末尾添加return false 。

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

他們都沒有一個很好的工作。 表格出現，但消失得最快。 在我看來，該表格是經過計算的，但是提交按鈕后，頁面會以類似的方式重新加載，然后頁面又消失了。

Answer 1

在showsDictionaryForm(event)事件處理程序內部，使用event.preventDefault()阻止發生默認行為（在您的情況下，表單正在提交到服務器）。

我建議在showsDictionaryForm上使用類操作而不是內聯樣式。 例如，您可以全局定義：

.hidden {
  display: none !important;
}

並使用它來顯示/隱藏form-dictionary形式。