執行功能時頁面刷新/崩潰

我正在爲電影網站製作一個簡單的搜索引擎。我有一個輸入類型文本形式，它允許用戶輸入他們正在尋找電影的標題：

<input class="search_button" type="submit" value="Zoek" id="search_button" onclick="ValidateInput();"/>

而且我有一對夫婦的JS功能。這一個檢查用戶是否確實已經進入什麼：

var user_Input = document.getElementById("input_box"); 


function ValidateInput() 
{ 
    var x = document.getElementById("input_box").value; 

if (x == "" || x == null) 
{ 
    alert("You haven't entered anything"); 
} 
else 
{ 
    Search(); 
} 
}

如果用戶輸入任何東西，我用這些功能來檢查，如果他們進入匹配輸入的任何網頁上的標題元素，如果確實如此標題的背景顏色被更改，瀏覽器會滾動到該標題。

function Search() 
{ 

    var flag = false; 
    movieName = document.getElementById("input_box").value; 
    movies = document.getElementsByTagName("h3"); 

    for (var i = 0; i < movies.length; i++) { 
     if (movieName === movies[i].innerHTML) { 
      movies[i].style.backgroundColor = "#d9e9e9"; 
      movies[i].scrollTo(); 
      flag = true; 
      // hoe gaan we het resultaat aan de gebruiker geven verder? 
     } 
    } 

    if (flag == false) 
    { 
     alert("no such movie was found"); 
    } 
}

現在，每次我運行此代碼，並輸入一個有效的電影標題，我可以看到的backgroundColor變化和瀏覽器滾動到指定的電影像一毫秒，但隨後的網頁自動刷新！我當然不希望發生這種情況，但我無法弄清楚我做錯了什麼。你們能幫助你們嗎？

由於提前，

- 羅伯特

來源

2014-09-24 Robert Kraaijeveld

你嘗試的onclick = 「ValidateInput（）;返回false;」 ??如果你有一個表格 - 如果你沒有阻止，它會被提交。 – Cheery 2014-09-24 18:01:29

我做過了，但對可惜沒有任何影響。 – 2014-09-24 18:04:16

在jsfiddle.net上創建一個示例並給我們一個鏈接。 – Cheery 2014-09-24 18:11:11

改變輸入的type到button。如果您不打算提交/發佈該頁面，爲什麼要使用submit輸入？

<input type="button" />

或者，使用button：

<button type="button"></button>

而且，看到這一點：How to prevent buttons from submitting forms

來源

2014-09-24 18:12:11 matthewpavkov

這個技巧。我會將它存儲在我的腦海中供將來參考;）非常感謝！ – 2014-09-24 18:15:28

沒問題，很高興幫助。 – matthewpavkov 2014-09-24 18:16:30

執行功能時頁面刷新/崩潰

回答

相關問題