用JavaScript修改html圖像每個勾號

我是JavaScript的新手，所以請和我一起袒護。我試圖用JavaScript每10ms檢查一次html表單的內容，如果表單的內容等於某個字符串，它將改變html圖像。這是我的代碼：用JavaScript修改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，因此我只用這段代碼就知道了。

我會任何幫助:)

來源

2017-04-11 Kriss0612

如果您的圖像加載時間超過10毫秒會怎麼樣？ – BenM

你幾乎得到它非常感謝：

所有你需要做的是將你的支票被觸發每x毫秒像這樣的函數中：

<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中創建一個文件夾的圖像，然後把2個圖像一個叫1.JPG和其他2.JPG。

來源

2017-04-11 11:39:19 Kris

我修復了setInterval問題，但它似乎不起作用。我猜測代碼沒有正確檢查HTML表單的內容並將其轉換爲JS變量，因爲我無法找到JS代碼的任何問題...我很確定你可以檢查HTML文本輸入的內容，而無需必須以任何方式提交它...... – Kriss0612

哦，我只是看到你用==來比較字符串而不是===。這是否修復了它？順便說一句，打開你的網站在鉻，然後按f12，所以你可以只是調試它 – Kris

不，那個不幸的是不解決它。但是，如果檢查文本表單的內容，而不必使用JavaScript提交它，那麼不應該有任何問題，應該在那裏？ – Kriss0612

由於括號()已插入setInterval()，因此代碼將不起作用。

setInterval需要一個函數作爲參數。你的代碼的作用是執行該函數並返回setInterval返回的任何內容。在這種情況下，沒有任何返回。所以你的代碼不會工作。

它應該是如下：

var i = 0; 
 

 
function changeContent() { 
 
    document.getElementById("oneDiv").innerHTML = i++; 
 
} 
 

 
setInterval(changeContent, 100);

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

來源

2017-04-11 11:50:22

如果你打開了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"; 
    } 
});

來源

2017-04-11 13:39:07

用JavaScript修改html圖像每個勾號

回答

相關問題