执行功能时页面刷新/崩溃

我正在为电影网站制作一个简单的搜索引擎。我有一个输入类型文本形式，它允许用户输入他们正在寻找电影的标题：

<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

执行功能时页面刷新/崩溃

回答

相关问题