Question

晚上好！

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

<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更改，浏览器滚动到指定的电影一段时间，但页面会自动刷新！我当然不希望这种情况发生，但我无法弄清楚我做错了什么。你们中的任何人/女士们可以帮忙吗？

提前致谢，

-Robert

Answer 1

将输入的type更改为button。如果您不打算提交/发布该页面，为什么要使用submit输入？

<input type="button" />

或者，使用button：

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

另请参阅：How to prevent buttons from submitting forms

执行Function时页面刷新/崩溃

1 个答案: