頁面加載后自動單擊按鈕

Question

我有一個帶有一些文本的起始頁面，當我單擊起始頁面中的顯示圖像按鈕時，它將重定向到另一個頁面並顯示圖像。

<form>
<select name="images" id="images">
        
        <option value="cars">Car Images</option>
        <option value="cycles">Cycle Images</option>
        <option value="bike">Bike Images</option>
</select>
<input id="getimages" type="submit" name="submit" value="Get Images">
</form>

當我 select 任何選項並單擊獲取圖像按鈕時，它才會相應地顯示圖像。 但是我想在頁面加載時顯示帶有自動選擇選項（第一個）的圖像，而無需單擊“獲取圖像”按鈕。 我嘗試使用

document.getElementById("getimages").click()

但頁面一次又一次地重新加載。 我怎樣才能用 JS/JQuery 解決這個問題。 我希望你理解上面的問題。 如果沒有，請告訴我。 謝謝。

Answer 1

如果您在頁面加載時自動單擊submit按鈕而沒有任何條件，它將創建一個無限循環。

您可以使用 select onchange事件。

<select name="images" id="images" onchange="document.getElementById("getimages").click()">

但這不是最佳解決方案。 我建議您使用 ajax 請求來加載圖像而無需任何頁面刷新。

Answer 2

我不知道我是否理解你，但如果是，那么這可能會對你有所幫助：我沒有你的 JS 代碼，但我猜你在單擊輸入時運行了一個事件，所以你可以添加相同的事件它將在文檔加載時運行。 我的意思是這樣的

const showImages = () => {
   // the code that shows the images
}

document.querySelector("#getimages").addEventListener("click", showImages())
document.addEventListener("load", showImages())