如何使用JavaScript顯示圖像
[英]How to display image using javascript
問題描述
如何使用javascript使用html顯示與用戶給定的輸入（數字）一樣多的圖像？ 我的代碼中似乎有一個錯誤，不知道如何糾正。
<!DOCTYPE html> <html> <body> <p>Click the button to add a new element to the array.</p> <input type="number" id="myNumber" value=""> <button onclick="imag(c,x)">Try it</button> <p id="demo"></p> <script> function imag(c,x) { var x = document.getElementById("myNumber").value; var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>"; var arr = []; for (var i = 0; i < x; i++) { arr.push(c); document.getElementById("demo").innerHTML = arr; } } </script> </body> </html>
4 個解決方案
解決方案1
0 已采納 2015-04-05 09:18:58
.innerHTML屬性采用字符串。 因此，您需要像這樣將數組轉換為單個字符串：
document.getElementById("demo").innerHTML = arr.join("");
請注意， 'C:/Users/Akhil/Desktop/New folder/G.jpg'通常不是引用您圖像的有效URL，因此您可能也需要進行修復。 您可以在此處閱讀以查看文件URL的工作方式： http : //en.wikipedia.org/wiki/File_URI_scheme
而且，沒有理由將兩個空變量傳遞給imag()函數。 您可以更改此：
<button onclick="imag(c,x)">Try it</button>
對此：
<button onclick="imag()">Try it</button>
解決方案2
0 2015-04-05 09:23:10
解決方案3
0 2015-04-05 09:28:39
您的變量x和c是未定義的，其中沒有任何內容，因此代碼會中斷。 這就是參數的工作方式，為它們提供一個值並將它們傳遞給函數，因此c變為'hello'，x變為5， fiddle ：
<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag('hello',5)">Try it</button>
<p id="demo"></p>
使用Javascript
function imag(c,x) {
var arr = [];
for (var i = 0; i < x; i++) {
arr.push(c);
document.getElementById("demo").innerHTML = arr;
}
}
但這不是很靈活吧？ 因此，您的解決方案已在其他答案中闡明。 每次單擊按鈕時，您不會傳遞參數並在函數中創建變量，請停止使用內聯調用。 真的是過時，凌亂和不必要的！ 了解如何使用事件處理程序。
解決方案4
0 2015-04-05 09:56:41
嘗試這個：
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>
<p id="demo"></p>
<script>
function imag() {
var x = document.getElementById("myNumber").value;
var c = '\<img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg"\/\>';
var arr = [];
for (var i = 0; i < x; i++) {
arr.push(c);
document.getElementById("demo").innerHTML = arr;
}
}
</script>
</body>
</html>
注意，我只是將<button onclick="imag(c,x)">Try it</button>更改為<button onclick="imag()">Try it</button> ； 我在這里切換了撇號： var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";
您告訴javascript imag（）應該獲得兩個變量。 但您從未給函數提供實際變量（而是將其填充到函數內部）。 所以我從函數的減速度中刪除了變量。
我做的第二件事是更改引號和撇號，因為HTML標准要求標記內容使用引號。 在它們之間切換可以使您保持HTML標准。
希望這對您有所幫助！
如何在javascript中使用相同的圖像多次顯示相同的圖像
[英]how to display same image multiple times using same image in javascript
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.