Question

我试图用JavaScript每10ms检查一次html表单的内容，如果表单的内容等于某个字符串，它将改变html图像。这是我的代码：

<form>
  Search<br/>
  <input type="text" name="search"/>
</form>

<img id="image" src="images/image.png"/>

<script type="text/javascript"> 
function searchtoJS {
    var userSearch = document.getElementsByName("search")[0].value;
}

setInterval(searchtoJS(), 10);

if (userSearch.toLowerCase() == "test" || "test2" || "1") {
    document.getElementById("image").src="images/image2.png";
}
</script>

就像我说的，我刚开始使用JavaScript，所以请耐心等待这段代码。

我将非常感谢任何帮助：）

Answer 1

你几乎得到了它：

您需要做的就是将检查内容移动到每x ms触发的函数中，如下所示：

<html>
<head>
</head>
<body>
<form>
 Search<br>
    <input type="text" name="search"/>
</form>

<br><br>

<img id="image" src="images/1.jpg"/>


<script type="text/javascript"> 
function searchtoJS () {
    var userSearch = document.getElementsByName("search")[0].value;
    if (userSearch.toLowerCase() === "test" || userSearch.toLowerCase() ===  "test2" || userSearch.toLowerCase() === "1") {
        document.getElementById("image").src="images/2.jpg"; 
    }
}

setInterval(searchtoJS, 1000);
</script>
</body>
</html>

将此文件发布在test.html文件中，然后创建一个名为1.jpg的图像，另一个名为1.jpg。

Answer 2

由于您在()中插入了括号setInterval()，代码无法使用。

setInterval需要一个函数作为参数。你的代码所做的是，它执行函数并返回setInterval返回的任何内容。在这种情况下，不返回任何内容所以你的代码不会工作。

应该如下：

var i = 0;

function changeContent() {
  document.getElementById("oneDiv").innerHTML = i++;
}

setInterval(changeContent, 100);

<div id="oneDiv"></div>

Answer 3

如果您对jQuery的使用开放，那么您可以每隔10ms执行该功能，而只要在输入发生变化时运行一个函数。

您需要为输入提供类似示例的ID。

<input id="searchField" type="text" name="search">

$('#searchField').on('input', function() {
    if($(this).val() == "test") {
        document.getElementById("image").src="images/image2.png";
    }
});

使用JavaScript更改每个刻度的html图像

3 个答案: